Cómo crear selects elegantes con CSS3

Antes del lanzamiento de CSS3, dar estilo a ciertos elementos HTML era una tarea realmente tediosa. Teníamos que echar mano de librerías javascript para ello, poniéndoselo realmente difícil a los puristas en diseño web que desconocen cualquier lenguaje de programación al uso. El elemento select era uno de estos componentes a los que era muy difícil personalizar, por no hablar de los botones de radio y los checkboxes. Y es que con la revolución en cuanto a diseño web que estamos gozando actualmente, qué menos que poder dar estilo a uno de los elementos web que más se utilizan en proyectos destinados a Internet. Parece mentira que, con técnicas tan avanzadas como la animación con CSS sigamos todavía dejándonos los sesos para dotar de diseño a elementos tan comunes como este.

Siempre he sido partidario, a no ser que la web lo obligue, de dejar a estos elementos con el diseño que traen por defecto, que muchas veces está influenciado por el propio navegador. Son diseño usables y pensados para que cualquier tipo de usuario lo pueda utilizar. Es por eso que, si no estas seguro que tu nuevo diseño para el select en cuestión sea mucho más usable que el que viene por defecto, mejor que no cambies nada. El usuario debe comprender fácilmente y con un solo vistazo el funcionamiento que realiza dicho elemento. Si tu diseño es la mar de bonito, pero no se entiende qué hay que hacer con él, algo estamos haciendo mal. Siempre hay que supeditar la usabilidad a la belleza estética en un diseño web. Esto es algo que todo diseñador y desarrollador se debe grabar a fuego en la mente antes de empezar un proyecto. Más que nada porque, si estamos solicitando en ese campo un dato importante para el cliente, o para nosotros mismos, y el usuario no comprende qué hacer con él, puedes ir despidiéndote de que el usuario lo ingrese correctamente y por consiguiente, puedes decir adiós al dato que tanto importaba.

De todas maneras, como he dicho antes, si en realidad quieres cambiarlo porque responde a las directrices de usabilidad y porque el proyecto así lo exige, con CSS3 puedes hacerlo. Por suerte, gracias a las actualizaciónes de Microsoft Edge, Safari, Chrome, el cual comparte un mismo motor de render con Firefox; podemos respirar tranquilos puesto que la tarea de crear selects elegantes es mucho más sencilla que antaño, que teníamos que utilizar plugins de javascript para ello. Para los lovers de Explorer, decir que los códigos que os mostremos hoy no funcionarán para IE8 y versiones anteriores, asi que tendréis que decidir entre usar librerías Javascript para ello, o como os he dicho antes, dejar el diseño del select por defecto.

A la hora de crear selects elegantes con CSS3 tenemos dos opciones. Seguro que hay más, pero estas dos son las que más nos han gustado. Crearlo utilizando una imagen de fondo, o bien solamente utilizando CSS3.

Antes que nada, este será el HTML que usaremos para crear nuestro select base, es decir, sin estilo ni nada:

<div class="select">
  <select>
    <option value="">Escoja una:</option>
    <option value="opcion-1">Opción 1</option>
    <option value="opcion-2">Opción 2</option>
    <option value="opcion-x">Opción X</option>
  </select>
</div>

Cómo crear un select utilizando una imagen de fondo

Por si no lo sabéis, Internet Explorer 9 no permite quitar la flechita que viene por defecto. Para poder hacerlo tendremos que meter al elemento en un contenedor que tendrá un ancho menor que el select y con eso podremos esconder la dichosa flecha, que ya no estará en nuestro elemento HTML. Para los demás navegadores, si queremos quitarle el estilo por defecto, valdría con la propiedad CSS appearance: none;.

Este sería el código a utilizar para crear un select elegante utilizando una imagen de fondo:

.select {
  border: 1px solid #ccc;
  width: 140px;
  overflow: hidden;
  background: #fff url("flecha-abajo.gif") no-repeat 90% center;
}

.select select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    appearance: none;
}

Cómo crear un select elegante usando solo CSS3

Si queremos hacerlo todo en base a CSS3 (para mi la mejor opción), nos valdría con que el selector tenga un fondo y un borde de color sólido, y la dichosa flechita. Si no sabéis cómo hacer triangulos en CSS os podéis valer de una herramienta online ideada para ello llamada CSS Triangle Generator.

Este sería el código para crear un select elegante utilizando CSS3 en exclusiva:

.select {
  position: relative;
  border: 1px solid #ccc;
  width: 120px;
  overflow: hidden;
  background-color: #fff;
}
  
.select:before {
    content: '';
    position: absolute;
    right: 5px;
    top: 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 5px 0 5px;
    border-color: #000000 transparent transparent transparent;
    z-index: 5;
    pointer-events: none;
}
  
.select select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    appearance: none;
}

Y eso sería todo. Espero que a partir de ahora vuestros selects sean la envidia de cualquier diseñador web, ya habéis visto que es una tarea sencilla comparado con lo que teníamos que hacer antes. Utilizar librerías como Chosen y Selectric ya es cosa del pasado. Ahora podemos personalizar nuestros elementos web, utilizando solamente CSS3.