CSS (jquery없이)를 사용하여 html 라디오 버튼을 이미지로 바꿉니다

Question

impute에 대해 예/아니요 라디오 버튼이 있습니다. CSS로 사용자 정의하고 버튼 (예/녹색 - 아니요/빨간색)으로 변경했습니다. 기본적으로 두 버튼은 회색으로 표시됩니다. '예'버튼을 클릭하면 파란색으로 바뀝니다. 나는 CSS로 해냈다. 그러나 '아니요'버튼을 클릭하면 빨간색으로 변하지 않습니다. 나는 그것을 구현하는 방법을 잘 모르겠습니다. 아래는 바이올린 링크입니다.

HTML :

<span id="radioButton"> 
    <input name="radio_13" id="radio_13Yes" value="Yes" type="radio"> 
    <label class="Yes Ui2Clickable" id="label_radio_13Yes">Yes</label> 
    <input name="radio_13" id="radio_13No" value="No" type="radio"> 
    <label class="No Ui2Clickable" id="label_radio_13No">No</label> 
</span> 

CSS : 레드 (없음) 컬러 버튼

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

input[type=radio] + label { 
    filter  : none; 
    background : linear-gradient(to bottom, #ffffff, #cccccc); 
    background : -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #f9f9f9), to(#ccc)); 
    text-shadow: 1px 1px 2px #fff; 
    font-family: 'Meiryo'; 
    font-size: 14pt; 
    font-weight: 700; 
    width: 200px; 
    height: 100px; 
    line-height: 80px; 
    line-width: 160px; 
    padding: 15px 40px; 
    border: 1px solid #333; 
    border-radius: 5px; 
    font-family: 'Meiryo'; 
    font-weight: 700; 
    max-width: 400px; 
} 

input[type=radio]:checked + label{ 
    filter  : none; 
    background : linear-gradient(to bottom, #13213b, #0088ce); 
    background : -webkit-gradient(linear, left top, left bottom, from(#13213b), color-stop(0.5,#3366cc), to(#0088ce)); 
    border: 2px solid #333; 
    color: #fff; 
    text-shadow: 1px 1px 2px #333; 
    font-family: 'Meiryo'; 
    font-size: 14pt; 
    font-weight: 700; 
} 

CSS

input[type=radio]:checked + label .No{ 
    filter  : none; 
    background : linear-gradient(to bottom, #cc0000, #FF1821); 
    background : -webkit-gradient(linear, left top, left bottom, from(#cc0000), color-stop(0.5,#FF1821), to(#FF1821)); 
    border: 2px solid #333; 
    color: #fff; 
    text-shadow: 1px 1px 2px #333; 
    font-family: 'Meiryo'; 
    font-size: 16pt; 
    font-weight: 700; 
} 

http://jsfiddle.net/myve53r5/ (바이올린 업데이트)

(I 돈; 사용하고 싶지 않다. jQuery를)

Answer 1

는 CSS 변경하십시오

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

input[type=radio] + label { 
filter  : none; 
background : linear-gradient(to bottom, #ffffff, #cccccc); 
background : -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #f9f9f9), to(#ccc)); 
text-shadow: 1px 1px 2px #fff; 
font-family: 'Meiryo'; 
font-size: 14pt; 
font-weight: 700; 
width: 200px; 
height: 100px; 
line-height: 80px; 
line-width: 160px; 
padding: 15px 40px; 
border: 1px solid #333; 
border-radius: 5px; 
font-family: 'Meiryo'; 
font-weight: 700; 
max-width: 400px; 
} 

#radio_13Yes:checked + label{ 
filter  : none; 
background : linear-gradient(to bottom, #13213b, #0088ce); 
background : -webkit-gradient(linear, left top, left bottom, from(#13213b), color-stop(0.5,#3366cc), to(#0088ce)); 
border: 2px solid #333; 
color: #fff; 
text-shadow: 1px 1px 2px #333; 
font-family: 'Meiryo'; 
font-size: 14pt; 
font-weight: 700; 
} 
#radio_13No:checked + label{ 
filter  : none; 
background : linear-gradient(to bottom, #cc0000, #FF1821); 
background : -webkit-gradient(linear, left top, left bottom, from(#cc0000), color-stop(0.5,#FF1821), to(#FF1821)); 
border: 2px solid #333; 
color: #fff; 
text-shadow: 1px 1px 2px #333; 
font-family: 'Meiryo'; 
font-size: 16pt; 
font-weight: 700; 
} 

http://jsfiddle.net/0w5zLsp1/