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