Styling a <select> drop-down menu arrow | Scrimba | Page 1

solar hearth Jan 23, 2023, 5:17 AM

#

Hi there,
I'm having issues with the default drop-down menu arrow in a <select> field. I'd like to add some padding-right to the arrow, but it's not as easy as it sounds (ust like working with any browser default arrows and spanners I guess)

Here's a scrim with multiple tests, and a working solution that I find hacky and not easy to manage.
I've hidden the default arrow and used a my own png instead in an ::after pseudo, then added negative margin. Unfortunately, the new png is not clickable so I will have to manage the arrow click with JavaScript now (not too sure how to handle that just yet)

https://scrimba.com/scrim/crd8LKf8

Looking forward to any ideas. Thank you!

#

Styling a <select> drop-down menu arrow

hearty pelican Jan 23, 2023, 6:35 AM

#

In the scrim you posted, I've gotten the <select> to be fully functional without enabling any of the "test" CSS, just by making one change to one rule. If I remove the background: #FFFFFF; property from the .upload-input-field rule, it seems to work perfectly fine. Does that solve the problem for you?

solar hearth Jan 23, 2023, 7:29 AM

#

Hey @hearty pelican ;
Thanks for that; yes it works on the scrimba editor, but I can't seem to replicate it local environment (Chrome and FF). Frustrating ... Gotta move on with the rest of the project though. I'll get back to that <select> when I have time. Thanks again!

#Styling a <select> drop-down menu arrow