I’m trying to change the color of the font in a dropdown field. In the form there’s a dropdown field with placeholder text “Select…”, and then when you click the dropdown you have all the selections that you can choose from. It’s this last part that I can’t find – how to change the font color of the suggestions in the dropdown. They’re currently too light to be seen clearly. TIA!
Select menus are a bit tricky to target with Microthemer because they cancel the click event that normally selects an element. As a side note, in MT version 7, you will be able to select elements without clicking them by hovering over them and then tapping the ALT key.
But the selector you need for targeting the options is:
select option
That targets an option element, inside a select element. But you probably don’t want to target all select options in any select element across your site. So you would want to use some classes or ids that the select element or a parent elements may have. You can see this my clicking near the select element, and then expanding Microthemer’s advanced options, which shows the HTML of the surrounding elements. So your selector might look something like this:
select#some-id option
Or, alternatively:
div.some-parent-container option
If you need help finding these ids or classes, feel free to post a link to the page you’re working on.
Thanks Sebastian, yes please can you help further. I’m looking for selectors for the 3 dropdowns on this form – https://mqredesign.wpengine.com/2021-redesign/contact/. If you can provide some guidelines I could consistently follow that would be great, as there will be at least 5 forms on this site, all with dropdowns. Thank you!
That’s great, and to answer your subsequent question about applying styles to all forms, not just one using an ID (because I answered this when I saw it in my feed reader, not noticing you had deleted it from the forum…)
I’m getting a “Site under development” message when I try to check your site now. But re-watching the video I made, I can see that a class (mktoForm) is added to the forms, which is probably added to all of them. So instead of referencing an id like I showed before, you can reference the class like this:
.mktoForm option
And then to target other elements inside the form you would use:
Thanks! I started to answer my own question so I deleted it from the forum. There are also instances of mktoLayoutLeft and mktoLayoutAbove to further confuse me, so I’m making my way through all of that. Unfortunately the existing forms aren’t all consistent so I have to figure out how to cover everything. Thanks for the help, I’d never have figured out that “option” selector.
