Forum Discussion
Changing the Matching dropdown graded quiz/survey colors
Hello! I'm hoping someone can help me out with a question about changing the colors for the choices in the matching dropdown options.
I was able to find the answer on how to change the hover color and have successfully done so within my project. However, I've been searching for an answer on how to change the color for currently selected answers for hours and haven't had any luck.
I've included the image below for reference:
Is there a way to change the yellow fill color for currently selected options? If so, how would I do that?
Thank you 😄
You’ll need to inject JavaScript to target the selected state. To do this, add an Execute JavaScript trigger that runs when the timeline starts on the slide:
const style = document.createElement('style'); style.innerHTML = ` .drop-list-item-selected { fill: #87CEEB !important; } `; document.head.appendChild(style);
7 Replies
Hello JennaG,
Thanks for reaching out! I want to confirm that the yellow fill color for selected answers cannot be modified at this time. I have shared your insight with our product team. We'll be sure to share any future updates in this thread so everyone is in the loop.
Have a great weekend!
You’ll need to inject JavaScript to target the selected state. To do this, add an Execute JavaScript trigger that runs when the timeline starts on the slide:
const style = document.createElement('style'); style.innerHTML = ` .drop-list-item-selected { fill: #87CEEB !important; } `; document.head.appendChild(style);I don't see a way to change the font color only for the selected answer. You can add another CSS rule (e.g., .drop-list text), but it seems to affect the font color of all drop-list items.
const style = document.createElement('style'); style.innerHTML = ` .drop-list-item-selected { fill: #87CEEB !important; } .drop-list text { fill: #2a2b2c !important; } `; document.head.appendChild(style);
