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

Menú horizontal: elementos de lista con margen variable

Normalmente, al crear un menú horizontal, emplearemos una lista de elementos de este tipo:

Si queremos que los elementos de nuestra lista estén separados entre sí a una distancia variable, bastará con añadir estas dos clases al elemento ul:

display: flex;
justify-content: space-between;

Ejemplo básico de cómo quedarían los estilos para nuestro menú horizontal:

nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
display: inline;
}

Puedes descargar el ejemplo en HTML haciendo clic en el siguiente enlace: Descargar ejemplo

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?