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í.

No hay comentarios:

Publicar un comentario

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?