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:

• Menú 1
• Menú 2
• Menú 3
• Menú 4
• Menú 5

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;
}

• Menú 1
• Menú 2
• Menú 3
• Menú 4
• Menú 5

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