Personalizar un select

Buenas señores y señoras lechug@s! En esta ocasión os traigo un par de sencillos trucos para personalizar vuestros selects utilizando html y css.

Partiendo de la situación por defecto de un select (es decir, sin ningún tipo de personalización anterior), lo primero que debemos hacer para customizar nuestro select, es modificar los estilos que lleva el select por defecto. Así por ejemplo modificaríamos el css de nuestro select así:

select {
     background: transparent;
     border: none;
     font-size: 14px;
     height: 30px;
     padding: 5px;
     width: 250px;
  }

En google chrome los select tiene por defecto una especie de sobra azulada, para quitarla debemos hacerlo con el siguiente código:

select:focus{
 outline: none;
}

Como resultado obtendriamos el siguiente select:

 

Para cambiar el botón que despliega las opciones, tendremos que hacer “trampa”, ya que no se nos permite cambiar el botón y es básicamente estético (ya que pulsando en el texto también se despliega). Por lo tanto, lo que haremos en su lugar es meterlo dentro de un div que tapara el botón. Al div le pondremos la clase “caja” y su css será el siguiente:

.caja {
     margin:20px auto;        
     border:1px solid #d9d9d9;
     height:30px;
     width: 230px;
     overflow: hidden;
     position:relative;
  }

Para que no nos perdamos, el código html de nuestro select ahora sería el siguiente:

<div class="caja">
  <select>
    <option>Opción 1</option>
    <option>Opción 2</option>
    <option>Opción 3</option>
  </select>
</div>

A continuación pondremo nuestro “botón” utilizando el pseudo-elemento after. Para este ejemplo utilizamos content:"\025be"; que es este símbolo: ▾, pero podemos utilizar cualquier otro símbolo, o incluso imágenes: content: url(imagen.gif);.

Así pues dejamos así el css:

.caja::after{
     content:"\025be";
     display:table-cell;
     text-align:center;
     padding-top:7px;
     width:30px;
     height:30px;
     background-color:#d9d9d9;
     position:absolute;
     top:0;
     right:0px;
     pointer-events: none;
  }

 

La propiedad “pointer-events” permite controlar como se comportan los elementos html respecto a los eventos del ratón.
En nuestro caso, el pseudo-elemento ::after, que está encima del <select>, interfiere en la funcionalidad de este y no nos deja desplegar las opciones. Para que esto no pase utilizamos pointer-events: none, para inhabilitar los eventos del ratón encima del pseudo-elemento.

Como resultado tenemos este select:

 

Y con estas directrices, supongo que sereis capaces de cambiar vuestros selects al gusto del consumidor.

Espero haberos sido de ayuda, nos vemos pronto!

Deja un comentario