Cambiar la flecha de un elemento Select

Seguramente, alguna vez te has encontrado con la necesidad de cambiar la flecha que aparece en los campos de selección para desplegar las distintas opciones, ya que dependiendo del navegador se muestran de una u otra forma.

Supongamos que tenemos el siguiente formulario, donde el último campo es un campo de selección, y donde hemos utilizado la siguiente imagen como flecha para desplegar las distintas opciones:

Imagen que vamos a usar como desplegable: flecha.png

Añade los siguientes estilos CSS:

select {
background-image: url(flecha.png); /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
background-repeat: no-repeat;
background-position: right center;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none; /*Evita que se muestre la flecha por defecto en versiones de IE*/
}

Descarga el ejemplo en HTML haciendo clic aquí.

1 comentario:

Entradas populares