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 |
|---|---|---|---|---|---|---|
| - | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
| - | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+00:00)
This topic contains 8 replies, has 2 voices.
Last updated by 4 years, 8 months ago.
Assisted by: Nigel.
Tell us what you are trying to do? - I am trying to change an icon within a dropdown menu. Currently, it displays as a double-arrow, but I'd like it to appear as: v (just a single, downward pointing arrow)
Is there any documentation that you are following? - I've searched for material within existing support threads, but haven't found the answer yet.
Is there a similar example that we can see? - I've uploaded an image of what I am trying to change
Hi Jason
I think that icon and the styling for the select dropdown come from your theme, it's not output by Toolset.
In my screenshot you can see the (somewhat ugly) dropdown styling with the twentytwenty theme viewed with Firefox.
Try changing your theme to twentytwenty, you should see something similar.
Different browsers have different default styles, but these can be overridden with CSS. It looks like your theme is doing that, and you would need to check how it is doing that to see the best way to change it. (If you look at the CSS the theme applies you should be able to provide a simple override targeting the same selectors.)
Sorry, I didn't see you'd updated the credentials.
I looked at your site, and your select buttons are showing the default styling for dropdowns provided by the browser.
In your case it looks like you are using Safari. You can see how it looks in Chrome and Firefox in the screenshot.
If your theme doesn't impose styling that you'd like you'll need to add it yourself.
Here is a very good guide to the CSS you need to do that: hidden link
(In particular, note that it uses a SVG as a background image for the arrow which is the minimum you'll want to adopt.)
Where in the Search and Pagination section of your View you have already added custom classes to the select inputs (e.g. city-text and country-text) you can add a common custom class to be able to target these selects with your custom CSS.
