使用CSS替換html單選按鈕和圖像（不含jQuery）

我有一個yes/no單選按鈕來進行評估。我使用CSS對其進行了自定義，並將其更改爲按鈕（yes/green - No/Red）。默認情況下，這兩個按鈕都是灰色的。當我點擊「是」按鈕時，它將變成藍色。我用CSS做了。但點擊「否」按鈕時，它不會變成紅色。我不知道如何實現它。下面是小提琴鏈接。使用CSS替換html單選按鈕和圖像（不含jQuery）

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/（小提琴更新）

（我不;不想使用jQuery的）

來源

2015-01-16 venkatesh shanmuganathan

它的工作在Chrome上的我的電腦 –

http://jsfiddle.net/myve53r5/ 請在這一個 –

請改變你的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/

來源

2015-01-16 07:01:27

嘗試請解釋的差異在你的回答和問題之間CSS – fjuan

謝謝Mohan，整個Html部分是循環的。這個'id'像radio_13Yes，radio_14Yes一樣被建立起來。所以我不能在CSS中指定id。有沒有其他辦法可以做到這一點？ –

雅。我們可以使用class.Please檢查鏈接。 http://jsfiddle.net/0w5zLsp1/2/ –

使用CSS替換html單選按鈕和圖像（不含jQuery）

回答

相關問題