Styling the dropdown field

[FrizzyBrain]

Hey @SanfordWhiteman, if 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? No css/js manipulation required. Just a system configuration or Form configuration. 

Thank you for your time.

[SanfordWhiteman · Accepted solution]

---

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.

[WolframLotz]

Hi @FrizzyBrain 

the thing is, that you use a nativ select field, which is quite good because it is supported by most of the browsers. The field you point on is a custom styled div field. Therefor it - most likely - uses custom JS. 

What they do ist do hide the native select field. If you have a look using inspect you will see that it is "display:none" instead there seems to be a JS which adds an additional field with the styling you like. 

The thing is - eventhough you can style the field and the dropdown you should take over the control over the position of the dropdown as - other wise - the border radius will sit on the wrong side. (dropdown shown on the top but dropdown shown above the field).
How this can be done is described here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select 

Some hints about how to style a select field can be find here: https://moderncss.dev/custom-select-styles-with-pure-css/ 

Does this help?

BR Wolfram

[FrizzyBrain]

Hey @SanfordWhiteman 

Could you please crop the footer of the image you've posted? We don't want our brand noted there. Thank you.