Styling the dropdown field

[FrizzyBrain]

Hello everyone,

Our forms are being embedded on our page. Now we are wanting to change the style of the marketo dropdown field to follow out Brand design scheme. We have partially been successful, as we were able to change the field. The issue that we are facing right now is when the dropdown field is in an open state, the container around the <option> tags look different. We have tried many ways to change this, is there any suggestions how to tackle this issue?

Below are images viewed on a desktop and on Edge:

[SanfordWhiteman]

Please link to your page so we can inspect your code. Can't troubleshoot a screenshot.

[FrizzyBrain]

Hey @SanfordWhiteman,

Here you go:  <link removed>.

[SanfordWhiteman]

Not sure what you mean by "different"? Is it that the options go bottom-up? That's because of the height of the page, the browser chooses the best direction automatically.

The custom fieldset-style look of the <select> label vs. the <input type="text"> labels looks to be the same.

  

Or are you referring to the fact that your JS leaves the top option's inner text empty when it's open? Please be specific about the discrepancy.

[FrizzyBrain]

We want the dropdown field (open state) to look like this design scheme:

As you can see from the design scheme vs current, the container around the <option> tags in the design scheme is different. Is there a way to make the current dropdown field to look like our design scheme?

[SanfordWhiteman]

Where is the top screenshot from? Please link to the page where this is implemented.

[FrizzyBrain]

Hey @SanfordWhiteman,

Apologies, here you go (click on the contact-us button): <link removed>

[SanfordWhiteman · Accepted solution]

Well, that isn’t an HTML <select>!

It’s a custom set of <div>s created from the HTML <select> (which is then hidden) using your site’s custom JS. So naturally it has a lot more styleability. Although it also doesn’t function exactly like a real Select (it lacks typeahead, for example).

[FrizzyBrain]

Hey @SanfordWhiteman,

Yes, I know it's imitating a <select> dropdown field. It's using a <div> tag. What I want to know is, are we able to style a <select> tag like how they've styled the <div> tag? Is it possible? The issue we are facing is not being able to style the container around the <option> tags. 

[SanfordWhiteman]

No, a real <select> cannot be made to look exactly like that fake <select>. Using the correct semantic element means you have more limited styling ability.