Request for Assistance in Customizing Dropdown List Selection Color

By: Arnaud G. | Asked: 07/10/2023
ForumsCategory: General questionsRequest for Assistance in Customizing Dropdown List Selection Color
Arnaud G. asked 10 months ago
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
1 Answers
Victor Font answered 10 months ago
This requires custom CSS. See this: https://linuxhint.com/change-selected-option-color-using-css/
Arnaud G. replied 10 months 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 10 months 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 10 months 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.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right