Style dropdown on datalist element

[leorapirap]

How can I style or replace the dropdown arrow in datalist?
Please I badly need help.

[I.m.learning]

Without any code; many might tell you to use Google.

http://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome

[leorapirap]

Yep. I have read that answer but it is for hiding the dropdown arrow and not styling it. Can you please show me how to do it? Much appreciate it.

[I.m.learning]

Can you provide some code/link/demo/pen/anything to help us help you? Without something it’s a guessing game.

[leorapirap]

Here is the code sample. :)
https://codepen.io/leorapirap/pen/ZBrBMx

[Beverleyh]

I have read that answer but it is for hiding the dropdown arrow and not styling it.

Have you tried not hiding it, but styling it instead? Background/color etc.

Or how about positioning an element/pseudo element over the top of the arrow and styling that any way you want. Also include pointer-events:none; so that clicks/taps pass through the fake arrow to the real arrow underneath.

Unfortunately I’m not in a position to demo anything because datalist isn’t supported in Safari, and I’m on iPhone at the mo. I’m sure you can attempt something from my description in order to run tests though.

[leorapirap]

Thanks for your answer. I haven’t figure out how to style the down arrow on the data list element and thanks for mentioning that it is not supported in safari because I haven’t tested it there. Cheers!

[I.m.learning]

Add a background image.

input[placeholder]{background-image:url() ;
background-size: 15px 20px;
background-position:right;
padding:10px;
background-repeat:no-repeat;
}

[Beverleyh]

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

[leorapirap]

Oh thanks! I’ll take note of that one. :)

[leorapirap]

Thank you :)

[I.m.learning]

I was wondering what arrow you were talking about. It wasn’t until I grabbed my phone that I actually saw one. Let me ask, what’s the difference between data list and a regular drop down?

[leorapirap]

You can actually type into the data list(a textfield) and search the list of options while the regular dropdown can’t.

[Beverleyh]

what’s the difference between data list and a regular drop down?

Google is your friend…

Short answer:
Datalist = suggestions along with open text entry
Select = prepopulated list of options

[I.m.learning]

I didn’t have time to Google. So I figured I’d ask here.

[Author]

Posts