Radio personalizada y checkbox usando CSS

¿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:

http://jqueryui.com/demos/button/#checkbox

Puedes hacerlo con css3 puro, usando la pseudo clase :checked . Inspirado en este artículo obtuve la siguiente solución:

caracteristicas:

  • solo css
  • no se necesita atributo de id
  • no se necesita un índice z

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.