can't find selector for form dropdown field

This topic contains 7 replies, has 2 voices, and was last updated by  Sebastian 1 week, 6 days ago.

Author Posts

lifesgreat

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!


Sebastian

Hey,

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


lifesgreat

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!


Sebastian

Sure thing, so a good selector for targeting all 3 selectors in the form on your contact page would be:

#mktoForm_1634 option

I’ve created a video to show you how I found that when looking at the HTML around the select menus. And also how to edit or add custom selectors in Microthemer.

I hope you can do something similar yourself on other parts of your site. Let me know if you get stuck at all.

Cheers!
Sebastian


lifesgreat

Thanks so much, that worked!


Sebastian

Hey,

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:

.mktoForm textarea

And so on.

Cheers!
Sebastian


lifesgreat

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.


Sebastian

You’re welcome, I’m glad you’re making progress!

You must login or register to reply to this topic.