Botón de radio con imagen personalizada.

He usado este ejemplo para las casillas de verificación, pero luego me di cuenta de que necesitaba una para los botones de opción.

¿Puede alguien personalizar este ejemplo para los botones de radio?

Cambiar checkbox marcar imagen a imagen personalizada

html

 Coach  Athlete 

jquery

 $('.input_class_checkbox').each(function(){ $(this).hide().after('
'); }); $('.class_checkbox').on('click',function(){ $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')) });

Violín:

http://jsfiddle.net/cn6kn/

o hay una solución única para usar imágenes personalizadas tanto para el botón de opción como para las casillas de verificación. Busqué en algunos pero todos ellos están ofreciendo sus propias pieles.

Del ejemplo que personalicé para incluir las imágenes de fondo de la siguiente manera, pero no funciona con los botones de radio, todos los botones de radio permanecen marcados independientemente de que haga clic en el otro.

 .class_checkbox { width: 36px; height: 36px; background: url("../images/checkbox.png"); } .class_checkbox.checked { background: url("../images/checkbox-checked.png"); } 

Usar pseudo-elementos en este caso estoy usando :: before (: before)

introduzca la descripción de la imagen aquí

Actualización: dado que Firefox aún no admite pseudo-elementos en las entradas, use los selectores de hermanos adyacentes

introduzca la descripción de la imagen aquí

 :root{padding: 40px} [name=radio]{ display: none } [for^=radio]{ position: relative; margin: 64px } [for^=radio]:before{ content: ''; position: absolute; left: -15px; top: -15px; width: 32px; height: 32px; background: red } [type=radio]:checked + [for^=radio]:before{ background: green } 
       

Oh, lo siento, entendí mal la primera vez, ¿qué tal algo como esto? http://jsfiddle.net/swm53ran/126/

más o menos lo que está pasando es que el antiguo botón de radio css se está ocultando, y luego su css asumirá el control, pero aún mantiene la funcionalidad de un botón de radio.

 label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; font-size: 13px; } input[type=radio] { display: none; } label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottombottom: 1px; background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); } .radio label:before { border-radius: 8px; } input[type=radio]:checked + label:before { content: "\2022"; color: red; font-size: 30px; text-align: center; line-height: 18px; }