can't find selector for form dropdown field

Author Posts

lifesgreat September 4, 2021 at 5:34 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

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 September 5, 2021 at 12:14 pm

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 September 5, 2021 at 8:38 pm

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 September 6, 2021 at 11:23 am

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 September 12, 2021 at 12:27 am

Thanks so much, that worked!

Sebastian September 12, 2021 at 8:48 am

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 September 13, 2021 at 12:32 am

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 September 13, 2021 at 9:39 am

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

You must login or register to reply to this topic.