使用 CSS 将 html 单选按钮替换为图像（不使用 jquery）

Question

我有一个 yes/no 单选按钮用于估算。我用 CSS 自定义了它并更改为按钮 (yes/green - No/Red)。默认情况下，两个按钮都是灰色的。当我点击 'yes' 按钮时，它变成了蓝色。我已经用 CSS 完成了。但是当点击 'No' 按钮时，它并没有变成红色。我不确定如何实施它。下面是fiddlelink。

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/（fiddle 已更新）

（我不想使用 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/

使用 CSS 将 html 单选按钮替换为图像（不使用 jquery）

Replace html radio buttons with image using CSS (without jquery)

radio-button