Styling a select box with CSS

UPDATE: I made some changes to this solution, take a look!

Working with a designer that loooves to over design native HTML components is a . You do all these ugly hacks and replace a select box with a ul/li list and do negative margin on the original etc etc. And no matter how much you try you never achieve the same completeness as the native element. But it is possible to style a select box with just CSS3.

I found this example but it uses an ugly hack to get rid of the native dropdown arrow, it wraps the select box in a container that has a fixed width and overflow:hidden, then it sets the select box to a fixed with that is wider than the container. Sure it must be a better way to get rid of it, and yes there is.

You can get rid if all the styling of a select box, but since our beloved browsers handle things differently you have to use a bit of tweaking.

This is the HTML we are gonna be using

<div class="styled-select">

Styling for the container, this is where we set the custom arrow, gradient etc, but no width, so it will just wrap the select box nicely.

.styled-select {
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    border: 1px solid #27292c;
    border-radius: 3px;
    background: url('bg.png') no-repeat right #494849;
    box-shadow:inset 0 0 1px #393939;
    -moz-box-shadow:inset 0 0 1px #393939;
    -webkit-box-shadow:inset 0 01px #393939;

And on the real select box we hide the styling, and set the background to transparent, but for IE we have to apply the hack I linked to earlier, but now with a relative width instead of a fixed one.

.styled-select select {
    -webkit-appearance: none;
    -moz-appearance: window;
    background: transparent;
    width: 100%;
    wid\th: 112%;   /* IE hack */
    padding: 1px 20px 0 3px;
    border: 0;

There you have it! A select box that is native and resizes just the way it should. If you want to test it, head to the jsfiddle! Comments are more than welcome=)

UPDATE: I made some changes to this solution, take a look!

comments powered by Disqus