(맞춤) 라디오 버튼을 CSS3에서 작동시키는 방법

Question

맞춤 라디오 버튼을 작동 시키려고했습니다. 나는 체크 박스를 사용했지만 체크 된 옵션을 하나로 제한해야한다는 것을 알았다. 나는 구글을 사용하여 찾은 예제/튜토리얼을 살펴 봤지만 간단한 4 개의 라디오 버튼 세트에 대해 충분히 이해했다고 생각했지만 ...

처음에는 첫 번째 버튼이 올바르게 표시되었지만 다른 버튼은 확인했다. 확인 된 PNG를 표시합니다. 이전에 확인한 단추가 선택되지 않은 상태로 되돌아 가지 않습니다.

버튼은 자신의 div에 수평으로 순차적으로 배열됩니다.

HTML

<div class='radio'> 
    <input id='B12' type='radio' class='radiobutton' checked> 
    <label id='lblB12' class='radiobutton-label' for='B12'>IR&nbsp;</label> 
    <input id='BBW' type='radio' class='radiobutton' > 
    <label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label> 
    <input id='B10' type='radio' class='radiobutton' > 
    <label id='lblB10' class='radiobutton-label' for='B10'>B10</label> 
    <input id='B8' type='radio' class='radiobutton' > 
    <label id='lblB8' class='radiobutton-label' for='B8'>B8&nbsp;</label> 
</div> 

CSS3

.radiobutton-label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    font-size: 15px; 
} 

input[type="radio"] { 
    display: none; 
    margin: 10px; 
} 

.radiobutton-label:before { 
    content:""; 
    display: inline-block; 
    width: 24px;  
    height: 24px; 
    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottombottom: 1px; 
    background: url(resources/CheckBoxUnchecked.png) left top; 
} 

input[type=radio]: + label:before { 
    background: url(resources/CheckBoxUnchecked.png) left top; 
} 

input[type=radio]:checked + label:before { 
    background: url(resources/CheckBoxOK.png) left top; 
} 

이 내가 시도한 첫 번째 웹 페이지입니다.

Answer 1

Relevant Spec - 17 Forms/17.2.1 Control types

라디오 버튼 몇 주 같은 컨트롤 이름, 그들은 상호 배타적 때를 제외하고 체크 박스처럼 하나는 같은 이름을 가진 "의"모든 다른 사람을 전환 할 때 전환 " 떨어져서".

따라서 무선 요소를 상호 배타적으로 사용하려면 모든 동일한 name 특성을 지정하십시오. 이 예에서는 방금 name="checkboxes"을 사용했습니다.

는 HTML을 EXAMPLE HERE

<div class='radio'> 
    <input id='B12' type='radio' class='radiobutton' name="checkboxes" checked="checked"/> 
    <label id='lblB12' class='radiobutton-label' for='B12'>IR&nbsp;</label> 
     <input id='BBW' type='radio' class='radiobutton' name="checkboxes"/> 
    <label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label> 
     <input id='B10' type='radio' class='radiobutton' name="checkboxes"/> 
    <label id='lblB10' class='radiobutton-label' for='B10'>B10</label> 
     <input id='B8' type='radio' class='radiobutton' name="checkboxes"/> 
    <label id='lblB8' class='radiobutton-label' for='B8'>B8&nbsp;</label> 
</div> 

자료 CSS 업데이트 :

input[type=radio] + label:before { 
    background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px 4px no-repeat; 
} 

input[type=radio]:checked + label:before { 
    background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px -18px no-repeat; 
}