我想这样设置单选按钮的样式:
我现在的代码是这样的:
input[type=radio] {
display:none;
}
input[type=radio]:checked +label:before {
background:green;
width: 15px;
height: 15px;
border: 0;
border-radius: 50%;
}
label {
color:black;
font-family:arial;
font-size:12px;
position:relative;
padding-left:20px;
}
label:hover {
color:green;
}
label:hover:before {
border:1px solid green;
border-radius: 50%;
}
label:before {
content:'';
height:13px;
width:13px;
border:1px solid lightgray;
border-radius: 50%;
display:inline-block;
position:absolute;
top:0;
left:0;
}
和 HTML 代码:
<input id="kunstmuseum1" type="radio" name="kunstmuseum" onClick="animateKunst('voll')"> <label class="gruen" for="kunstmuseum1">Volle Subvention</label>
<input id="kunstmuseum2" type="radio" name="kunstmuseum" onClick="animateKunst('halb')"><label for="kunstmuseum2">Subventionen um die Hälfte kürzen</label>
<input id="kunstmuseum3" type="radio" name="kunstmuseum" checked="checked" onClick="animateKunst('null')"><label for="kunstmuseum3">Keine Subventionen mehr</label>
是否可以为 input[type=radio] 添加不同的类,我怎样才能只填充一半的单选按钮?这是一个 jsfiddle:http://jsfiddle.net/x5d4tyq7/
最佳答案
要为样式选择正确的单选按钮,请使用此 css:
input[type=radio]:checked:nth-of-type(1) +label:before{
这将选择第一个单选按钮(如果它处于事件状态)。将 nth-of-type(1) 更改为任意数字以选择正确的单选按钮。
这会将单选按钮更改为您的示例:
条纹:
background: -webkit-repeating-linear-gradient(315deg, black, white 10%);
background: -o-repeating-linear-gradient(315deg, black, white 10%);
background: -moz-repeating-linear-gradient(315deg, black, white 10%);
background: repeating-linear-gradient(315deg, black, white 10%);
50/50 黑/白:
background: -webkit-repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
background: -o-repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
background: -moz-repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
background: repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
白色:
background-color: white;
border: solid 1px green;
关于javascript - 单选按钮的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27173256/