Dale un nuevo estilo a tus formularios
Alguno elementos de los formularios son más complicados de modificar a nuestro gusto que otros (por ejemplo, las casillas de verificación o las listas desplegables), y a veces no quedan como nos gustaría que quedasen y no se adaptan a nuestros diseños.
Una solución para este problema es la que nos proponen en ryanfait.com, con la que mediante un poco de Javascript y CSS podemos dar un toque especial a nuestros formularios.
Si queremos darle un nuevo estilo al formulario, tendremos que descargar este archivo js, e incluirlo en la página del formulario.
También hay que añadir este código CSS:
span.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.select {
position: absolute;
width: 158px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial, sans-serif;
background: url(select.gif) no-repeat;
overflow: hidden;
}
Lo último es descargar las imágenes de las casillas de verificación, los radiobutton (no se me ocurre ninguna buena traducción… ¿botones de radio? ¿botones circulares?) y las listas desplegables.
Para aplicarlo basta con añadir class=”styled” a los elementos que queremos darle ese nuevo estilo, mientras que dejamos como antes los que no queremos modificar.
Podéis descargar un pequeño formulario de prueba que he creado. Es muy básico, pero se puede ver con facilidad cómo se aplica.
Espero que os resulte útil.
One reply on “Dale un nuevo estilo a tus formularios”