Como cambiar la apariencia de un selector con CSS

Darle estilos a un selector es complicado o, más bien extraño, en realidad.

En este artículo vas a averiguar como cambiar la apariencia o aspecto de un selector utilizando únicamente técnicas CSS.

¿Has probado hacerlo alguna vez?

En realidad, la verdad es que yo no mucho tampoco. Solo los clientes exigentes se fijan en todos los detalles. Hace tiempo encontré una solución simple (que no utiliza plugins de terceros) que permite cambiar el aspecto de los selectores y ahora he decidido compartirlo contigo.

Cambiar la apariencia de un selector no es tan fácil como cambiar la apariencia de otros elementos de un formulario como son los inputs, textareas, entre otros.

Antes de nada debes quitarle la apariencia que le cada navegador con la siguiente propiedad:

Source code

appearance: none;

Después, ya puedes agregarle todos los estilos que desees, como por ejemplo:

Source code

select {
    appearance: none;
    padding: 15px 20px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    border: 1px solid green;
    background-color: green;
    color: #ffffff;
    font-size: 18px;
}
 
select:focus {
    outline: none;
}

En este caso concreto:

• Quito la apariencia que le da el navegador por defecto.
• Le agrego mucho más padding o espacio entre el texto y el borde.
• Agrego un borde medio redoneado en color verde.
• Cambio el color de fondo a verde.
• El color del texto lo pongo en blanco.
• Y cambio el tamaño de la fuente.
• Además, con la propiedad outline en focus consigo eliminar el borde azul que los navegadores ponen por defecto al pulsar o seleccionar una opción del selector.

El código HTML que debes agregar es el típico de un selector:

Source code

<select name="language">
    <option value="es">Español</option>
    <option value="en">Inglés</option>
</select>

Para conseguir como resultado algo como lo siguiente:

De esta forma, puedes cambiar rápidamente la apariencia o aspecto de un selector sin utilizar plugins de terceros y sin mucho esfuerzo.

¿Tienes un diseño mejor? Comparte tu código con la comunidad.