Styling a select box with CSS - revisited

My earlier blogpost on styling a select box has gotten a lot of traction lately and this is an updated version of that. The previous example actually used an image, although I said it didn’t;-)

This is the updated HTML, I just added one tiny element, a small price to get rid of an image.

<div class="styled-select">
    <span class="arrow"></span>
    <select>
        <option>One</option>
        <option>Two</option>
    </select>
</div>

The new span is styled to an arrow and a separator with the following code (this is not the complete CSS, please visit the jsfiddle for that).

.arrow {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #A0A1A4;
}

.arrow:before {
    content: '';
    position: absolute;
    top: -15px;
    left: -12px;
    height: 19px;
    border-left: 1px solid #27292C;
}

Take a swing at the new jsfiddle and see if you can come up with a neater solution! =)

comments powered by Disqus