How to Style Select Boxes with CSS3

It is a truth universally acknowledged (no, I don’t like Jane Austen) that even with the power of CSS3, select boxes are very hard to style (of course, you can use the CSS3 appearance property, but it is still tricky and buggy, and is best supported only by Chrome). Fortunately, there exist a few tricks that can be used to achieve custom styling. Here’s mine, and it does not use any JavaScript, the semantics and the accessibility of the element are preserved, simply because I did not replace the control with custom markup. I just wrapped it in a span.

The code follows, but if you are impatient to give it a try, you can download it from this link.

Before and After

The Markup

<span class="css3-selectbox"><select>
    <option value="JavaScript">JavaScript</option>
    <option value="CSS">CSS</option>
    <option value="HTML">HTML</option>
</select></span>

The CSS

:root .css3-selectbox,
:root .css3-selectbox select,
:root .css3-selectbox::after,
:root .css3-selectbox::before {
    display: inline-block;
    vertical-align: top;
    height: 18px;
}

:root .css3-selectbox::after,
:root .css3-selectbox::before {
    content: "";
    pointer-events: none; /* remove the pointer event of the custom arrow, so the mouse actually clicks the real one */
}

:root .css3-selectbox,
:root .css3-selectbox::after {
    background: #757575;
    background: linear-gradient(#757575, #626262);
}

:root .css3-selectbox select {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: normal 11px/18px "Segoe UI", Arial, Sans-serif;
    color: #fff;
    outline: none;
}

:root .css3-selectbox option {
    background: #535353;
}

:root .css3-selectbox {
    border: solid 1px #303030;
    overflow: hidden;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 0 0 1px #6a6a6a, 0 0 0 1px #919191 inset;
}

/* the custom arrow, achieved with element's border styles */
:root .css3-selectbox::before {
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 4px;
    width: 0;
    height: 0;
    border: solid 4px transparent;
    border-top-color: rgba(255, 255, 255, .6);
}

:root .css3-selectbox::after {
    position: relative;
    left: 1px;
    width: 16px;
    margin: 0 0 0 -17px;
    box-shadow: -1px 0 0 1px #919191 inset;
}

:root .css3-selectbox:hover::before {
    border-top-color: #fff;
}

Related Posts:

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• CSS3 Element Reflections
• Fancy CSS3 Toolips (Yeah, Without Any JavaScript)
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping

About these ads