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