SummArg | Cursos y recursos para webmasters

21/01/2012

Aplicar estilos diferentes a checkboxes, radio buttons y listas select en HTML con javascript y CSS

Cada navegador muestra controles y elementos de formularios diferentes, y no permite aplicar estilos sobre ellos desde el CSS así que nos queda recurrir a algún script externo. En este caso se trata de Custom Form Elements, que nos permite modificar el gráfico correspondiente al checkbox, radio button y lista de select.

Para utilizarlo en un proyecto primero debemos descargar el archivo custom-form-elements.js, el archivo form.css y las imágenes que vayamos a utilizar. Entre etiquetas head insertamos:

<link rel="stylesheet" href="css/form.css" />
 <script type="text/javascript" src="scripts/custom-form-elements.js"></script>

Y en cualquier elemento en donde queramos aplicar el estilo, añadimos la clase “styled” de la siguiente manera:

<select name="state" size="1" class="styled">
 <option value="">Choose one</option>
 <option value="">Choose one</option>
 <option value="">Choose one</option>
 <option value="">Choose one</option>
 </select>
<ul>
 <li><input type="radio" name="account" value="Yes" checked class="styled">Yes</li>
 <li><input type="radio" name="account" value="No" class="styled">No</li>
 </ul>

Funciona en IE7 en adelante y todas las versiones actuales de los demás navegadores. Les dejamos un checkbox y un radio diferentes para que utilicen.

 

Descarga | Documentación

Dejar un comentario