¿Hay alguna forma de diseñar el botón de radio y la checkbox utilizando imágenes personalizadas? usando solo CSS?
¿Alguien puede señalarme cómo se puede hacer?
De lo contrario, ¿cuáles son los mejores plugins para jquery para hacerlo?
Check CSS – Casillas de verificación de estilo, botones de radio y menús desplegables
jQuery UI tiene algunas opciones excelentes y fácilmente implementables:
Puedes hacerlo con css3 puro, usando la pseudo clase :checked . Inspirado en este artículo obtuve la siguiente solución:
caracteristicas:
id Pruébelo en jsfiddle: http://jsfiddle.net/tlindig/n6by8/6/
HTML:
CSS:
input[type="radio"] { display:none; } input[type="radio"] + i:before { content:'\2718'; color:red; } input[type="radio"]:checked + i:before { content:'\2713'; color:green; }
Algunas explicaciones:
El elemento i es necesario para agregar un pseudo elemento :before con el icono como contenido. input elementos de input son tags vacías y no pueden tener pseudo elementos como :before y :after por lo que necesitamos un elemento adicional. También puedes usar span o div , pero i es más corto.
Se necesita una label para activar la input . Si ajusta la input con un elemento de label , no necesita id y for atributos para asociación.
‘\ 2718’ y ‘\ 2713’ son códigos de caracteres UTF8 para “boleta X” y “marca de verificación”.
En lugar de content , también puede establecer una background-image o lo que quiera.
Funciona en todos los navegadores modernos y ie9 +.
No estoy seguro de que puedas hacer esto con CSS puro, pero de esta manera es muy bueno con javascript:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Checkout WTF, formularios de un creador de Bootstrap Mark otto . Tiene buenos estilos para checkbox y radio.