Como cambiar la apariencia de un selector con CSS

Darle estilos a un selector es complicado o, más bien extraño, en realidad.

En este artículo vas a averiguar como cambiar la apariencia o aspecto de un selector utilizando únicamente técnicas CSS.

¿Has probado hacerlo alguna vez?

En realidad, la verdad es que yo no mucho tampoco. Solo los clientes exigentes se fijan en todos los detalles. Hace tiempo encontré una solución simple (que no utiliza plugins de terceros) que permite cambiar el aspecto de los selectores y ahora he decidido compartirlo contigo.

Cambiar la apariencia de un selector no es tan fácil como cambiar la apariencia de otros elementos de un formulario como son los inputs, textareas, entre otros.

Antes de nada debes quitarle la apariencia que le cada navegador con la siguiente propiedad:

appearance: none;

Después, ya puedes agregarle todos los estilos que desees, como por ejemplo:

select {
    appearance: none;
    padding: 15px 20px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    border: 1px solid green;
    background-color: green;
    color: #ffffff;
    font-size: 18px;
}
 
select:focus {
    outline: none;
}

En este caso concreto:

  • Quito la apariencia que le da el navegador por defecto.
  • Le agrego mucho más padding o espacio entre el texto y el borde.
  • Agrego un borde medio redoneado en color verde.
  • Cambio el color de fondo a verde.
  • El color del texto lo pongo en blanco.
  • Y cambio el tamaño de la fuente.
  • Además, con la propiedad outline en focus consigo eliminar el borde azul que los navegadores ponen por defecto al pulsar o seleccionar una opción del selector.

El código HTML que debes agregar es el típico de un selector:

<select name="language">
    <option value="es">Español</option>
    <option value="en">Inglés</option>
</select>

Para conseguir como resultado algo como lo siguiente:

Selector css

De esta forma, puedes cambiar rápidamente la apariencia o aspecto de un selector sin utilizar plugins de terceros y sin mucho esfuerzo.

¿Tienes un diseño mejor? Comparte tu código con la comunidad.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre