Personalizar la apariencia de elementos de formulario mediante imágenes.

Este script gratuito puede ser una muy buena alternativa para aquellos que quieran utilizar elementos de formulario personalizados mediante imágenes. Los elementos de formulario que permite modificar son tres:

• Radio button: Botones de opción.
• Select lists: listas de selección.
• Check box: cajas de verificación.

Para modificar la apariencia de los controles, el ejemplo utiliza un archivo javascript llamado custom-form-elements.js y también un archivo CSS ( form.css ).

Puedes ver una captura de pantalla de los elementos de formulario a continuación, o pulsando en este enlace una demostración online del script desde la web del autor.

Otras características

• Es compatible con la mayoría de los navegadores webs actuales: Internet explorer 7 y 8, FireFox, Opera , Chrome y Safari. No funciona con las versiones viejas de IE.
• En caso de que el navegador web tenga Javascript deshabilitado, los elementos de formulario se mostrarán normalmente, es decir sin las imágenes que le cambian la apariencia.
• Además de utilizar las imágenes del ejemplo, es posible mediante cualquier editor gráfico modificarlas o crear nuestros propios estilos.
• Es fácil de implementar, solo es necesario incluir a la página web desde la sección head el archivo de hoja de estilo, el JS con el script, e insertar un elemento de formulario como cualquier otro y añadirle una etiqueta o atributo Class: <input type="checkbox" class="styled" />

Nota. Si se utiliza el ejemplo tal cual está en la página, es decir con las imágenes que vienen con la demostración, no deberás modificar ninguna línea de código. En cambio si creas tus propias imágenes, será necesario cambiar algunas variables, dichas variables definen el alto de la imagen. Las variables son checkboxHeight , radioHeight y selectWidth para el ancho del control de lista.

También, si utilizas imágenes propias, es posible que haya que ajustar algunas propieades del código CSS ( Propiedades width y height)