选中时更改单选按钮的边框颜色 [英] Change border-color of radio button when selected
本文介绍了选中时更改单选按钮的边框颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我选择它时,我希望有一个绿色的单选按钮并带有绿色边框.
这就是我所拥有的:
I want to have a green radio button surrounded with a green border when I select it.
This is what I have:
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
属性无济于事...我该怎么办?
Here is a Jsfiddle: Demo
Like you can see the border-color
never changes to green... I tried to add border-color
property to no avail... How can I do it?
谢谢!
推荐答案
您需要检查CSS.您得到的边框是由盒子阴影而不是边框创建的:
Hey mate you need to check your css. The border you got is created by box-shadow and not by a border:
这是一个正在工作的小提琴.玩得开心
here is a fiddle that is working. Have Fun
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>
这篇关于选中时更改单选按钮的边框颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文