CSS 토글 라디오 스위치 사용자 정의

Question

본 사이트의 섹션에서 잘 작동 할 것이라고 생각되는이 CSS 라디오 토글은 어떻게 개별화하여 녹색이 켜지고 꺼짐이 빨간색이됩니까?

JsFiddle

나는 CSS의 일부를 변경하려했지만 캔트이 내가 두 개의 별도의 클래스를 만들 필요가 비트입니다 얻을 것?

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

생각하고 예 환영 감사합니다 :) 여기

Answer 1

은 바이올린의 : 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

당신이 관련 라디오 input 인 경우에만 변경할 수 background-color를 원한다면 내가 좋을 것 확인 됨 :

#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.

이 접근법은 마크 업에서 요소의 순서에 따라 달라 지지만 다른 속성을 추가 할 필요는 없습니다.

Answer 3

또는

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