Wondering if it's possible to style the dropdown of <select> elements


#1

I’ve been diving into styling the Shadow DOM usage in Atom, and I found one part of my style that I’m not really fond of: the dropdown of a <select> element. I was right that it does use the Shadow DOM, but I can’t figure out how to style it… it seems like it’s not possible. Has anyone managed to do it? The problem I have with it is the ugly blue and white outline.

http://puu.sh/h5gOU/56fbd20b72.png

If it’s not possible to style, shouldn’t it be replaced with a custom implementation of a dropdown? To make it possible to restyle. =)

ps: This is what the <select> element looks like, including its shadows:

http://puu.sh/h5gUV/580b206dd9.png


#2

What have you tried so far? In your css you can use /deep/ or ::shadow.


#3

I’m not aware of a way to style the <select> dropdowns. They also look different depending on the OS. Here OS X:

As you say, it would need to be re-implemented using something custom.


#4

I’ve tried both. It seems like the look of it is are hardcoded. The <content> tag only has 3 properties, for instance:

display: inline;
height: auto;
width: auto;

And I’m pretty sure most tags get that by default. =P
And as you can see the shadows of the options are literally just strings, and those can’t be styled.