Quiero quitar la flecha por defecto de la caja de selección y quiero usar un icono personalizado. De las respuestas anteriores en SO, he descubierto que no es posible (para que funcione con los principales navegadores). La única posibilidad es envolver la selección dentro de un div, y establecer su anchura más que la anchura del div y el establecimiento de desbordamiento: oculto. Estoy intentando lo siguiente, pero no funciona. ¿Qué estoy haciendo mal?
begin snippet: js hide: false console: true babel: false -->
.selectParent {
width: 80px;
overflow: hidden;
}
.selectParent select {
width: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Fin del fragmento;
JSFiddle:
Por favor, siga el siguiente procedimiento:
.selectParent {
width:120px;
overflow:hidden;
}
.selectParent select {
display: block;
width: 100%;
padding: 2px 25px 2px 2px;
border: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.selectParent.left select {
direction: rtl;
padding: 2px 2px 2px 25px;
background-position: left center;
}
/* for IE and Edge */
select::-ms-expand {
display: none;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<br />
<div class="selectParent left">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Fin del fragmento;