Añadir estilos a un campo select con CSS

Estilos CSS para ajustar el diseño de los campo Select de un formulario y conseguir que se vean iguales en diferentes navegadores.


por

Añadir estilos uniformes a los campos de un formulario es entretenido, pero especialmente los campos de selector (las listas desplegables), son especialmente difíciles de dar un estilo acorde con el resto de campos y diseño de la web, y aceptablemente homogéneo en los diferentes navegadores.

Hoy traigo un código que creo que nos puede ir muy bien, ya sea tal como viene, o ajustando algunos valores según nuestras necesidades:

Éste es el código de un campo select estándar:

<select class="select-css">
 <option>Seleccionar...</option>
 <option>Primera opción</option>
 <option>Segunda opción</option>
 <option>Tercera opción</option>
 <option>Cuarta opción</option>
</select>

Y aquí puedes ver la comparativa entre el campo estandar (que ser verá diferente según el navegador que estés utilizando) y el que aplicaremos el estilo nosotros:

See the Pen Select CSS Styles by esolalf (@esther_sola) on CodePen.

Este es el CSS aplicado:

.select-css {
 display: block;
 font-size: 16px;
 font-family: 'Arial', sans-serif;
 font-weight: 400;
 color: #444;
 line-height: 1.3;
 padding: .4em 1.4em .3em .8em;
 width: 400px;
 max-width: 100%; 
 box-sizing: border-box;
 margin: 0;
 border: 1px solid #aaa;
 box-shadow: 0 1px 0 1px rgba(0,0,0,.03);
 border-radius: .3em;
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background-color: #fff;
 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
   linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%);
 background-repeat: no-repeat, repeat;
 background-position: right .7em top 50%, 0 0;
 background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
 display: none;
}
.select-css:hover {
 border-color: #888;
}
.select-css:focus {
 border-color: #aaa;
 box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
 box-shadow: 0 0 0 3px -moz-mac-focusring;
 color: #222; 
 outline: none;
}
.select-css option {
 font-weight:normal;
}

Nos quedará así:

De esta forma, no sólo podemos controlar mejor su aspecto, sino también intentar que sea lo más parecido posible en diferentes dispositivos y navegadores.

Nota: el código original está en este enlace de Github, aunque he cambiado un poco algunos valores del CSS para que se ajustara un poco más a cómo me gustaba a mi.

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA

Comentarios

7 respuestas a «Añadir estilos a un campo select con CSS»

  1. Avatar de Cristina

    |

    Muy bueno tu post solo tengo una duda para quitar el border-radius??

    1. Avatar de esther

      |

      Hola Cristina, cambiando la propiedad border-radius: 0px; ya tendrás quitado el borde redondeado.

      Saludos!

      1. Avatar de Cristina

        |

        Muchas gracias! al final lo conseguí con Border-radius: 0 0; que al principio si solo ponía un cero no me funcionaba por eso lo pregunté. Un saludo.

  2. Avatar de Nicolas

    |

    y para cambiar el color azul a la hora de seleccionar cada opcion, como se quita?

    1. Avatar de esther

      |

      Hola!
      Con los campos nativos de formulario no es posible cambiar el color azul que aparece al seleccionar las opciones.
      Para cambios más avanzados, ya tendrías que sustituir el campo select por otras opciones más avanzadas con jQuery por ejemplo.

  3. Avatar de Slayermago

    |

    Se puede achicar la lista desplegables? o sea que muestre menos campos por defecto y se mueva con un scroll?

    1. Avatar de esther

      |

      Hola!

      Qué yo sepa en el campo estandar del navegador no se puede. Este campo tiene muy limitadas las opciones de personalización gráfica.

      Un saludo!