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: #000 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;
  }