Hello,
I would like to customize the selection color of the dropdown list field with the autocomplete option. It is currently set to blue by default. I have searched for a solution to change the color in the style settings, but I have found nothing.
Could you please help me with this issue?
Thanks for your help.
Arnaud
This requires custom CSS. See this: https://linuxhint.com/change-selected-option-color-using-css/
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.
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.
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.
Please login or Register to submit your answer