html - personalizados - CSS Alternar la personalización del cambio de radio

personalizar input checkbox

Question

Encontré este Alternador de radio CSS, que creo que funcionaría bien para una sección de nuestro sitio, ¿cómo lo individualizaría para que el encendido sea verde y el rojo sea el apagado?

JsFiddle

Intenté modificar algunas de las CSS, pero parece que no puedo obtener ¿es esto lo que necesito para hacer dos clases separadas?

#bounds input:checked + span {
background-color:#404040;
color:#F7F7F7;
border-radius:3px;
}

Pensamientos y ejemplos bienvenidos gracias :)

Answer 1

Aquí hay un violín: http://jsfiddle.net/RkvAP/1304/

<div id="bounds">
    <label class="on"><input type="radio" name="toggle"><span>On</span></label>
    <label class="off"><input type="radio" name="toggle"><span>Off</span></label>
</div>

#bounds label.on input:checked + span {
    background: green;
    colr: #f7f7f7;
}

#bounds label.off input:checked + span {
    background: red;
    color: #f7f7f7;
}

Answer 2

O puede ser así ...

<style>

#bounds input:checked + span.on {
    background-color: #0C0;
    color:#F7F7F7;
}
#bounds input:checked + span.off {
    background-color: #F00;
    color:#F7F7F7;
}

</style>

<div id="bounds">
    <label><input type="radio" name="toggle"><span class="on">On</span></label>
    <label><input type="radio" name="toggle"><span class="off">Off</span></label>
    </div>

Answer 3

Sugeriría, si desea que el background-color cambie solo cuando la input radio relevante esté marcada:

#bounds input:checked + span {
    color:#F7F7F7;
}
#bounds label:first-child input:checked + span {
    background-color:#060;
}
#bounds label:first-child + label input:checked + span {
    background-color:#600;
}

JS Fiddle .

Aunque este enfoque depende del orden de sus elementos en el margen, aunque no requiere la adición de ningún otro atributo.