Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn’t too much CSS stuff you can apply to it, just properties like color, background, font or border.
In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like
The need for custom dropdowns
The browser defaults were never enough, that’s why web developers are constantly trying to push the limits and possibilities when it comes about customizing native HTML elements. Lately, we’ve seen so many custom checkboxes and radios, custom progress bars and many more but nothing new related to dropdowns or file inputs for example.
Having this in mind, and inspired by Lea Verou’s technique, I decided to share with you my take on customizing a HTML dropdown. Just as a disclaimer, I’m aware there are a lot of awesome jQuery plugins in the wild that can help you build beautiful and sophisticated dropdowns, but sometimes it feels like it is just too much for a dropdown.
To get started, below is the markup needed for a custom HTML dropdown.
You may wonder why I chose a
span as a wrapper and not a
label which might seem more appropiate. The reason is because we don’t want to waste the label’s functionality for this customization only. Also, this way you can still wrap everything inside a label to improve usability like so:
BEM naming convention
In case you noticed the namespacing, I’m using the BEM naming convention which I’m sure you’ve seen before. Needless to say, this rocks!
Check the styles below to see how everything works. The
@supports rule does all the the magic:
At first sight, the CSS might seem a bit too overwhelming, so let’s deconstruct it.
appearance: none declaration is used here to reset the default look for the native dropdown. The
appearance property is very useful when you want to add a specific styling to an element that doesn’t have it by default or to remove the specific styling entirely, as in this case.
You may have seen above this CSS rule:
@-moz-document url-prefix(), well this is a hack to target Firefox only browsers. There is a pretty old bug on Firefox on how
appearance: none works, it’s about the fact that while
appearance: none seem to work, the native dropdown arrow is still showing.
So, the temporary solution is to basically cover the native dropdown arrow for now:
::before & ::after
Having applied the above declaration which clears the default look, the dropdown triangle is made using pseudo elements. There isn’t too much to say here, you know pseudos, they are everywhere. :)
If you aren’t familiar with
pointer-events, you should know that with
pointer-events: none, which is the most encountered declaration, you can remove mouse events for current page navigation for example. In this case, we removed mouse events for the right triangle pseudo element to avoid accessibility issues.
As a side effect, if an element has
pointer-events: none applied to, its hover state can’t be styled anymore.
Last but not least, the latest
@supports rule as its CSS equivalent.
To prevent browsers inconsistencies, the following rule allows you to target only browsers that have support for both
appearance. The best examples here are the IE9 and IE10 browsers, both support a lot of CSS3 stuff from the above code but do not support (yet) cutting edge stuff like
appearance which makes the technique inefficient.
The truth is that you may use the CSS only keyword to name this styling solution. But, to cover also the case when a select is disabled, you’ll need some JS to target the parent node for it and apply a HTML class like
Returns the list of the elements within the document that match
For each disabled select, go to its parent node and append the
custom-dropdown--disabledHTML class. This way, we’ll be able to use CSS in order to customize the arrow when a select is disabled.
Of course, none of the above will be necessary if the select element, which is a replaced element, would have allowed pseudo elements on it or if a CSS parent selector would have existed. But that’s another story. :)
On browser support
As far as i tested, the demo is working on Firefox Nightly/Aurora, Chrome Canary and Opera Next. Also, this means that very soon you’ll be able to see this working also in the release versions, considering how often new browser versions are launched. Check the compatibility table for support of CSS Feature Queries in desktop and mobile browsers.
Besides the above browsers versions, while preparing to publish this article, Firefox 22 just launched as well. And guess what? Support for CSS Conditionals (@supports and CSS.supports) has been enabled by default. So, we’re on the right track! :)
It seems that latest Chromium-based Opera 15 supports @supports as well. Awesome. Just awesome.