Re: Styling the dropdown field

FrizzyBrain · ‎03-08-2023

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 · ‎03-09-2023

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).

View solution in original post

SanfordWhiteman · ‎03-13-2023

it's not possible to manipulate the <select> tag fully, is there a system configuration that we can do in Adobe Marketo's Form settings to change that <select> tag to a <div> tag?

Certainly not! <div> elements aren’t form inputs, and Marketo uses real inputs, as all forms libraries should.

Other elements — leaving aside future form-associated custom elements, which aren’t supported in all browsers yet — aren’t part of the form.

Obviously you could inject a fake form element and link it to a hidden real input, which is how “enhanced“ form widgets work. You can’t replace the real input with a fake input.

View solution in original post

SanfordWhiteman · ‎03-08-2023

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

FrizzyBrain · ‎03-09-2023

Hey @SanfordWhiteman,

Here you go: <link removed>.

SanfordWhiteman · ‎03-09-2023

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 · ‎03-09-2023

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 · ‎03-09-2023

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

FrizzyBrain · ‎03-09-2023

Hey @SanfordWhiteman,

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

SanfordWhiteman · ‎03-09-2023

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 · ‎03-12-2023

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 · ‎03-12-2023

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.