- This topic is empty.
December 2, 2016 at 5:55 pm #248584
How can I style or replace the dropdown arrow in datalist?
Please I badly need help.December 2, 2016 at 6:15 pm #248586
Without any code; many might tell you to use Google.
http://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chromeDecember 2, 2016 at 6:30 pm #248587
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.December 2, 2016 at 8:47 pm #248591
Can you provide some code/link/demo/pen/anything to help us help you? Without something it’s a guessing game.December 3, 2016 at 12:12 am #248594
Here is the code sample. :)
https://codepen.io/leorapirap/pen/ZBrBMxDecember 3, 2016 at 1:49 am #248598
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.December 6, 2016 at 6:15 pm #248735
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!December 6, 2016 at 8:40 pm #248736
Add a background image.
background-size: 15px 20px;
}December 7, 2016 at 3:55 am #248738
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=datalistDecember 7, 2016 at 4:21 am #248740
Oh thanks! I’ll take note of that one. :)December 7, 2016 at 4:22 am #248741
Thank you :)December 7, 2016 at 5:09 am #248742
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?December 7, 2016 at 5:15 am #248743
You can actually type into the data list(a textfield) and search the list of options while the regular dropdown can’t.December 7, 2016 at 5:36 am #248744
what’s the difference between data list and a regular drop down?
Google is your friend…
Datalist = suggestions along with open text entry
Select = prepopulated list of optionsDecember 7, 2016 at 11:50 am #248757
I didn’t have time to Google. So I figured I’d ask here.
- The forum ‘CSS’ is closed to new topics and replies.