This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to change some colors in custom search select field filters.
Solution: You can change the background color using code like this:
.wpv-custom-search-filter__input select {
background: #fc0;
}
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 4 replies, has 2 voices.
Last updated by 3 years, 3 months ago.
Assisted by: Christian Cox.
Hi,
I have a query, please.
I have attached a screenshot of my search listing page.
In it, I get these 2 shades of gray colours in the dropdown fields.
May I please know the way to get custom colours?
Thank you.
Rajiv
Okay the Toolset software does not really influence the colors you pointed out, nor does it provide any systems for adjusting these colors. You can try changing the background color of the empty select fields with the following CSS code:
.wpv-custom-search-filter__input select {
background: #fc0;
}
I set an orange color so you can see the change in my screenshot here, as shown in Chrome on a Mac. This may or may not be consistent across different browsers, because different operating systems display select fields in different ways. Our support team is not really the best source of information about this, it's really more of a question about how much customization is allowed for standard HTML input styles.
I'm pretty sure the background color of the full options list and each individual option in a select field cannot easily be adjusted with CSS, nor can the highlight color. These are determined by the browser and operating system, and are not implemented consistently across browsers and devices. For example, on my Mac I have a dark theme applied in Google Chrome so the background is very dark in my example. In other browsers it might be very light. On iOS devices, select field options are shown in a completely different interface that looks like a spinner. So there is not really an easy way to style these areas consistently with basic CSS like background or background-color.
If you want fully custom designs for a select field, you would have to implement a JavaScript replacement system like select2.js, or another similar plugin. Standard HTML select fields just don't provide enough flexibility to achieve exactly what you're looking for.
