Para que nuestros formularios tengan un diseño atractivo es necesario modificar los css de los distintos elementos, para darle un buen aspecto. Hoy os muestro como modificar con css el aspecto de un select de un formulario. ¿Quieres cambiar estilos de un select con css? Es de una manera básica y sencilla por lo que si estás empezando con css te puede servir de ayuda.
Como cambiar el aspecto de un select con css
El aspecto sin estilos sería el siguiente:
El código html sería:
<select> <option>Primera opcion</option> <option>Segunda opcion</option> </select>
Para que tenga estilos tendríamos que añadirle la clase con_estilos en el código html:
<select class="con_estilos"> <option>Primera opcion</option> <option>Segunda opcion</option> </select>
y crear el estilo con_estilos en el archivo css:
.con_estilos {
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
background-color:#ddd;
}
Por lo que nuestro select modificado quedaría de la siguiente forma:
Incluso se puede modificar la flecha añadiendo una imagen en el estilo del css:
background: url(flecha.png) no-repeat right white;
Gracias Nestor, por decirme que no funciona lo del background. Como se puede intuir la flecha se ve por debajo.
Este es un ejemplo básico de como cambiar con css el estilo de un select en un formulario. Ahora solo falta que lo personalices con los colores y tipo de letra que quieras.
¿Te animas a personalizar el select?
Si te ha gustado el artículo, solo te queda compartirlo 🙂
