Question

如何设置每个单选按钮的样式？

我试过这个：

div.radio-toolbar {width:410px;}

.radio-toolbar input[type="radio"] {
    display:none;
}

.radio-toolbar label {
    display:inline-block;
    background:#FFF;
    font-family:"Arial Black", sans-serif;
    font-size:12px;
    color:#666666;
    width:106px;
    padding-left:4px;
}

.radio-toolbar #radio1 [type="radio"]:checked + label {
    background:url("../images/radio1.png") no-repeat;
    color:#FFF;
}
.radio-toolbar #radio2 input[type="radio"]:checked + label {
    background:url("../images/radio2.png") no-repeat;
    color:#FFF;
}
.radio-toolbar #radio3 input[type="radio"]:checked + label {
    background:url("../images/radio3.png") no-repeat;
    color:#FFF;
}

HTML：

<div class="radio-toolbar">

    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">Radio1</label>

    <input type="radio" id="radio2" name="radios"value="false">
    <label for="radio2">Radio2</label>

    <input type="radio" id="radio3" name="radios" value="true">
    <label for="radio3">Radio3</label>
</div>

Answer 1

尝试

    .radio1 [type="radio"]:checked + label {
    background:url("../images/radio1.png") no-repeat;
    color:#FFF;
}
.radio2 input[type="radio"]:checked + label {
    background:url("../images/radio2.png") no-repeat;
    color:#FFF;
}
.radio3 input[type="radio"]:checked + label {
    background:url("../images/radio3.png") no-repeat;
    color:#FFF;
}

然后在HTML中

<input type="radio" id="radio1" class="radio1" name="radios" value="all" checked>
    <label for="radio1">Radio1</label>

Answer 2

最好的解决方案不仅仅是css，而且只能使用css

原始代码问题：

.radio-toolbar input[type="radio"] {
    display:none;
}

您的控件不再可见且无法点击给用户 - 这意味着 :checked永远不会发生。

要隐藏默认单选按钮，大多数人都会使用opacity（visibility应该可以使用，但没有人试一试）

解决方案将是

.radio-toolbar input[type="radio"] {
    opacity:0;
}

标签

.radio-toolbar input[type="radio"] + label{
    marign-left:-20px; /* change this 20px to default radio button size */
    padding-left:20px; /* change this to your background size to cover default radio */
}

此解决方案的唯一问题是：它限制您的替换图像大小，需要接近原点单选按钮。如果您需要更大的控制权，则需要使用javascript来触发单选按钮.checked porperty

希望它有所帮助。

Answer 3

男女

输入[type = radio] {

display: none;

}

标签{

display: inline-block;  

cursor: pointer;  

position: relative;  

padding-left: 25px;  

margin-right: 15px;  

font-size: 13px;

}

输入[type = radio]：选中+标签：在{

之前

content: "\2022";  

color: #f3f3f3;  

font-size: 30px;  

text-align: center;  

line-height: 18px;

}

标签：在{

之前

content: "";  

display: inline-block;  



width: 16px;  

height: 16px;  



margin-right: 10px;  

position: absolute;  

left: 0;  

bottombottom: 1px;  

background-color: #aaa;  

box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255,

255，.8）;

}

.radio label：在{

之前

border-radius: 8px;

}

Css单选按钮问题 - 如何设置每个单选按钮的样式？

3 个答案: