Arnaud G. replied 1 year ago

Hello Victor,
Thank you for your response. I've spent several hours trying to solve this issue with no success. I attempted to modify the CSS in the following way:

.chosen-search option:hover {
background-color: your-color !important;
color: white !important; /* change text color on hover, modify if necessary */
}

However, this has not worked. The field, when hovered over, is still the default blue color:

I'm out of ideas. If you have a solution, I would greatly appreciate it.

Arnaud G. replied 1 year ago

Hello Victor,
Thank you for your response. I've spent several hours trying to solve this issue with no success. I attempted to modify the CSS in the following way:

.chosen-search option:hover {
background-color: your-color !important;
color: white !important; /* change text color on hover, modify if necessary */
}

However, this has not worked. The field, when hovered over, is still the default blue color:

I'm out of ideas. If you have a solution, I would greatly appreciate it.

Victor Font replied 1 year ago

If you're using chosen, you're targeting the wrong element. Chosen is not a select input. Chosen values are list objects. Use your browser's inspection tool to find the correct element classes.

For the drop down list, target li.active-result.result-selected. For the input field, use a.chosen-single.chosen-single-with-deselect. You need to apply the colors to both places.