Web forms are bottom-line the bread and butter of the Web. They allow us to send and input information pertaining to a number of factors revolving around our interests/needs/wants. When it comes to styling inputs (and in particular styling custom select menus) some have argued that styling custom select menus are obnoxious and distract a user from what they’re normally accustomed to. I would disagree with that last statement and think it really involves customizing a select menu in a way that can be distinguished and understood logically. Lets take a look at customizing a select menu and then examine a possibility I’d like to see readily available to authors.
Customizing the select input
For the sake of simplicity here’s the Codepen we’ll be discussing. In this example you’ll find the HTML, CSS and JavaScript that makes up our custom select menu. I will bring to light a few points of interest for further explanation.
// References
//
// Lea Verou
// http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3
//
// Chris Coyier AKA CSS-Tricks
// http://css-tricks.com/dropdown-default-styling
// Wrapper
// ======================================
.wrap {
width: 50%;
margin: 1em auto;
}
// Custom Select Input
// ======================================
.custom-select {
border: 1px solid #CCC;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
cursor: pointer !important;
display: inline-block;
margin: 0 auto;
padding: 10px;
width: 100%;
}
// Custom Select Styling for Webkit
// ======================================
// Allows us to use a custom arrow and avoid
// the browsers that dont support it.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.custom-select {
color: lightgrey;
.pointerevents & {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/select-arrow.png) 95% 50% no-repeat;
}
}
}
See the Pen %= penName %> by Dennis Gaebel (@grayghostvisuals) on CodePen
Digging Deeper
At first glance of the CSS you may notice the @media
query screen and (-webkit-min-device-pixel-ratio: 0)
. This is important because currently we can’t have custom select menu arrows as a background-image
on non webkit browsers so we need a way to detect and control the display of them. You can however create a custom arrow using unicode, but only by using the :before
or :after
properties and wrapping the <select>
tag with a <label>
then detecting the presence of pointer-events
.
The end result will be something like the images below that show how this custom select menu will render across browsers.


What’s Annoying
The annoying part to me in all this is the fact that I still have to use an image! I’d rather use a character entity or an icon font while still using the background-position
and background-image
properties. So that means I’d like to do something like…
HTML
<select data-icon="▾"></select>
and then in my CSS…
CSS
background: attr(data-icon) top right no-repeat;
This way if my designer uses an arrow like the one we used in the data-attribute
I can avoid using an image and go with a character entity (or an icon font as I was saying). Also IMO using a background-image
in this scenario is way better then using :before
or :after
as it’s much easier to position the arrow without resorting to position: absolute
to move it around when used in conjunction with :before
or :after
. Who knows. Maybe someday we can use Shadow DOM and get this party started.
Agree? Hate what I said? Gotta different take on this? Talk into the mic!
Buddy its not working in Firefox……….. 🙁
Yes that’s correct. I made sure to note this in my article…
And here’s a screenshot of fallback scenarios for cases like Firefox (i.e. non-Webkit).