选择它时，我希望绿色的单选按钮带有绿色边框。
这就是我所拥有的：
input[type='radio'] {
-webkit-appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
outline: none;
box-shadow: 0 0 0 2px gray;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
.role {
margin-right: 80px;
margin-left: 20px;
font-weight: normal;
}
.checkbox label {
margin-bottom: 20px !important;
}
.roles {
margin-bottom: 40px;
}
和模板：
<div class="roles">
<input type="radio" name="role" value="ONE" id="one">
<label class="role" for="one">ONE</label>
<input type="radio" name="role" value="TWO" id="two">
<label class="role" for="two">TWO</label>
</div>
这是一个Jsfiddle：演示
就像您看到的border-color从不改变为绿色一样...我试图添加border-color属性无效...我该怎么办？
谢谢！
嗨，您需要检查CSS。您得到的边框是由盒子阴影而不是边框创建的：
这是一个正在工作的小提琴。玩得开心
input[type='radio'] {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
outline: none;
border: 3px solid gray;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type="radio"]:checked:before {
background: green;
}
input[type="radio"]:checked {
border-color:green;
}
.role {
margin-right: 80px;
margin-left: 20px;
font-weight: normal;
}
.checkbox label {
margin-bottom: 20px !important;
}
.roles {
margin-bottom: 40px;
}<div class="roles">
<input type="radio" name="role" value="ONE" id="one">
<label class="role" for="one">ONE</label>
<input type="radio" name="role" value="TWO" id="two">
<label class="role" for="two">TWO</label>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句