Example of styled select box with just CSS. Live example here: http://www.mychildrensboutique.co.uk/
select{
/* remove arrow */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* bootstrapify corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* girlify it */
border: 1px solid #ffd2eb;
background: url(my-arrow.png) no-repeat center right;
min-width: 135px;
line-height: 28px;
padding: 0 4px;
}
/* Kill IE arrow */
select::-ms-expand {
display: none;
}
/**
select{
@include prefix(appearance, none, webkit moz);
background: url('{{ "select-arrow.png" | asset_url }}') no-repeat center right;
background-color: $white;
background-position: 95%;
background-size: 11px 8px;
border: 0;
border-radius: 0;
line-height: 28px;
min-width: 172px;
padding: 0 4px;
}
// Kill IE arrow
select::-ms-expand {
display: none;
}
*/