Forum Discussion
Solved
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...
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);
Nedim Wow, thank you so much! This absolutely worked. Is it possible to also change the font color using JavaScript? If so, what would I need to enter?
More CSS properties you can play with:
const style = document.createElement('style');
style.innerHTML = `
.drop-list-item-selected {
fill: #87CEEB !important;
}
.drop-list text {
fill: #2a2b2c !important;
}
.drop-list-drop-down text {
fill: #fff !important;
}
.drop-list-item-out {
fill: #222 !important;
}
.drop-list-item-over {
fill: #aaa !important;
}
#drop-list-gradient stop:first-child {
stop-color: #222 !important;
}
#drop-list-gradient stop:last-child {
stop-color: #aaa !important;
}
.drop-list-top > rect {
fill: aliceblue !important;
}
`;
document.head.appendChild(style);This is amazing and helps so much. I really appreciate your time and expertise 🙂