Caixa de seleção totalmente personalizada, apenas css simples

Todo mundo sabe que as caixas de seleção de estilo são uma droga. Aqui está uma ajuda.

Você basicamente remove a seleção original o máximo possível e continua estilizando-a com um envoltório div. Funciona no IE8 +

Cenário

Esta versão tem aparência simples, você pode estilizá-la como quiser.

HTML

<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>

CSS

.select-style {
border
: 1px solid #ccc;
width
: 120px;
border
-radius: 3px;
overflow
: hidden;
background
: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}

.select-style select {
padding
: 5px 8px;
width
: 130%;
border
: none;
box
-shadow: none;
background
: transparent;
background
-image: none;
-webkit-appearance: none;
}

.select-style select:focus {
outline
: none;
}