{"id":297747,"date":"2019-10-28T15:13:16","date_gmt":"2019-10-28T22:13:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=297747"},"modified":"2019-10-28T15:13:16","modified_gmt":"2019-10-28T22:13:16","slug":"the-current-state-of-styling-selects-in-2019","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-current-state-of-styling-selects-in-2019\/","title":{"rendered":"The Current State of Styling Selects in 2019"},"content":{"rendered":"

Best I could tell from the last time I compiled the most wished-for features of CSS<\/a>, styling form controls was a major ask. Top 5, I’d say. And of the native form elements that people want to style, Greg Whitworth has some data<\/a> that the <select><\/code> element is more requested than any other element — more than double the next element — and<\/em> it’s the one developers most often customize in some way. <\/p>\n

Developers clearly want to style select dropdowns.<\/p>\n

<\/p>\n

You actually do a little. Perhaps more than you realize.<\/h3>\n

The best crack at this out there comes from Scott Jehl over on the Filament Group blog<\/a>. I’ll embed a copy here so it’s easy to see:<\/p>\n

\n See the Pen
\n select-css by Scott\/Filament Group<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

Notably, this is an entirely cross-browser solution. It’s not something limited to only the most progressive desktop browsers. There are some visual differences across browsers and platforms, but overall it’s pretty consistent and gives you a baseline from which to further customize it.<\/p>\n

That’s just the “outside”<\/h3>\n

Open the select. Hmm, it looks and behaves like you did nothing to it at all.<\/p>\n

\"\"
Styling a <select><\/code> doesn’t do anything to the opened dropdown of items. (Screenshot from macOS Chrome)<\/figcaption><\/figure>\n

Some browsers do let you style the inside, but it’s very limited. Any time I’ve gone down this road, I’ve had a bad time getting things cross-browser compliant.<\/p>\n

\"\"
Firefox letting me set the background of the dropdown and the color of a hovered option.<\/figcaption><\/figure>\n

Greg’s data<\/a> shows that only 14% (third place) of developers found styling the outside to be the most painful part of select elements. I’m gonna steal his chart because it’s absolutely fascinating:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Frustration<\/th>\n%<\/th>\nCount<\/th>\n<\/tr>\n<\/thead>\n
Not being able to create a good user experience for searching within the list<\/td>\n27.43%<\/td>\n186<\/td>\n<\/tr>\n
Not being able to style the <option> element to the extent that you needed to<\/td>\n17.85%<\/td>\n121<\/td>\n<\/tr>\n
Not being able to style the default state (dropdown arrow, etc.)<\/td>\n14.01%<\/td>\n95<\/td>\n<\/tr>\n
Not being able to style the pop-up window on desktop (e.g. the border, drop shadows, etc.)<\/td>\n11.36%<\/td>\n77<\/td>\n<\/tr>\n
Insertion of content beyond simple text in the <select> control or its <option>s<\/td>\n11.21%<\/td>\n76<\/td>\n<\/tr>\n
Insertion of arbitrary HTML content in an <option> element<\/td>\n7.82%<\/td>\n53<\/td>\n<\/tr>\n
Not being able to create distinctive unselected\/placeholder style and behavior<\/td>\n3.39%<\/td>\n23<\/td>\n<\/tr>\n
Being able to generate new options from a large dataset while the popup is open<\/td>\n3.10%<\/td>\n21<\/td>\n<\/tr>\n
Not being able to style the currently selected <option>(s) to the extent you needed to<\/td>\n1.77%<\/td>\n12<\/td>\n<\/tr>\n
Not being able to style the pop-up window on mobile<\/td>\n1.03%<\/td>\n7<\/td>\n<\/tr>\n
Being able to have the options automatically repeat on scroll (i.e., if you have an list of options 1 \u2013 100, as you reach 100 rather than having the user scroll back to the top, have 1 show up below 100)<\/td>\n1.03%<\/td>\n7<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Boiled down, the most painful parts of styling selects are:<\/p>\n