Style dropdown on datalist element

[leorapirap]

Unfortunately a background-image would still allow the default arrow to be visible over the top.

I still think a pseudo element is the way to go – something like this http://codepen.io/anon/pen/xRjzKg
The default arrow is still there, its just obscured by the faux arrow, and pointer-events allow the click/tap to pass through.

Note that the faux arrow will be visible in those browsers that don’t support datalist so you’d need to compensate for that. http://caniuse.com/#search=datalist

worked like a charm! thanks a lot!

[Beverleyh]

No problem. Happy to help :)

[Dawrani]

How can i change datalist background color?

[Beverleyh]

As far as I’m aware, you can’t easily style datalists with CSS – they adopt the browser style. I can’t test anything at the mo though as I’m on iOS and datalists aren’t supported there. You can try at your side though and see what happens – the usual way – something like; datalist { background:red }

[Author]

Posts