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;
        }
    }
}

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!

• http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3
• http://css-tricks.com/dropdown-default-styling
• https://bugzilla.mozilla.org/show_bug.cgi?id=649849