selects con estilo

24/mar/2015 5

Estamos en pleno año 2015, la humanidad está trabajando para llevar humanos a Marte y todavía no podemos dar estilos CSS crossbrowsing a las etiquetas <select> Y para qué mencionar los <input type=”checkbox”> y <input type=”radio”>

A pesar de existir plugins y artimañas que lo permitan, siempre he recomendado dejar los estilos por defecto de los elementos de formularios, ya que por años han sigo bloqueadores de la conversión. Por su importancia, los formularios deben tener los menos impedimentos posibles a la hora de que el usuario llene el campo, y la incompatibilidad ó mal aplicación de un diseño a estos campos suelen ser una de las principales causas de rebote en la conversiones. El usuario quiere responder o seleccionar un campo, y éste no funciona o al click no queda seleccionado. Frustración aparte, despídete de los datos de ese usuario.

En el presente, teniendo IE11 como browser por defecto de Microsoft, Chrome / Opera compartiendo un mismo motor de render y Firefox con cada vez más frecuentes actualizaciones, podemos respirar más tranquilos y entregar estilos CSS directo al elemento <select> sin preocuparse de utilizar algún plugin, eso sí siempre y cuando el soporte mínimo sea IE9+. Para IE8 y menores aún deberás tomar una decisión: no le doy diseño personalizado, ó agrego esfuerzo aplicando un plugin como Chosen ó Selectric.

Vamos al asunto: dado un <select><option value=””></select>, existen 2 técnicas dependiendo del diseño que se le vaya a aplicar: con una imagen de fondo, o sin (puro CSS si el diseño lo permite):

<div class="select">
  <select>
    <option value="">Seleccione uno:</option>
    <option value="opcion-1">Opción 1</option>
    <option value="opcion-2">Opción 2</option>
    <option value="opcion-n">Opción N</option>
  </select>
</div>

IE 9 no permite remover la flecha por defecto del campo <select>, entonces lo que hacemos es darle rodear el <select> con un contenedor, el que tiene un ancho menor (el <select> tendrá un width: 130%;) y con eso esconderemos la flecha ya que estará fuera del contenedor del <select>. Para el resto de los browsers, deberemos limpiar el estilo por defecto del <select> mediante la propiedad CSS appearance: none; (con prefix) para luego aplicar el diseño:

Técnica 1: con imagen de fondo

.select {
  border: 1px solid #ccc;
  width: 140px;
  overflow: hidden;
  background: #fff url("arrowdown.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;
  }

Técnica 2: puro CSS

Suponiendo el diseño es sencillo, simple y orientado a la conversión, basta que el <select> tenga un fondo y un borde de color sólido y la bendita flecha / triángulo que siempre será útil. Para hacer triángulos con CSS uso mi mixin en LESS ó un generador de triángulos CSS:

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

Comentarios

  1. Dani [#]

    Y que pasa cuando el texto de las opciones o de una opción en concreto es más largo que el div contenedor? Pues que se ve el texto por debajo de la flecha y queda horrible :) Yo he buscado mil soluciones a eso y al final he acabado por utilizar este plugin para el custom de los selects http://adam.co/lab/jquery/customselect/. Espero que sea de utilidad para todos los que se hayan encontrado con el mismo problema.

  2. Jorge Epuñan [#]

    Dani: puedes utilizar otro pseudo-element para tapar el texto q como dices efectivamente pasa detras de la flecha. Mira el link con mi test aqui. Espero sea lo q necesitas.

  3. Dani [#]

    Si, esa solución creo que ya la había probado antes… El problema de tapar el texto está solucionado, pero ahora se agrega otro problema… Si haces click encima de la flecha que pasa? Nada :) Al tener un elemento (el cuadrado con la flecha) por encima del select, la flecha no acciona nada. Crees que puedes solucionarlo? Gracias.

  4. Jorge Epuñan [#]

    Claro Dani, mira la propiedad pointer-events q ya esta siendo utilizada en el :before (flecha). Sólo tienes q agregarla tb en el :after, aqui el resultado.

    • Dani [#]

      Tiene muy buena pinta, habrá que buscar una polyfill para IE8, pero tiene buena pinta. Muchas gracias!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab