我想要一个绿色的单选按钮,当我选择它时,它被一个绿色的边框包围着。
这就是我所拥有的:
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:Demo
就像你看到的
border-color
永远不会变成绿色......我试图添加border-color
属性无济于事......我该怎么做?谢谢!
你需要检查你的CSS。你得到的边框是由 box-shadow 而不是边框创建的:
这是一个正在工作的小提琴。玩得开心
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>
你可以只更新
box-shadow
颜色:
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']:checked {
box-shadow: 0 0 0 2px green;
}
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>
虽然上面的答案是正确的,但使用 CSS
appearance: none
属性 可以更简单地实现相同的行为。
例如,如果你想改变
border-color
,你可以使用以下组合来实现它:
.radio {
appearance: none;
border-color: red;
}
请注意,MDN 文档说:
注意:如果你想在网站上使用这个属性,你应该非常仔细地测试它。尽管大多数现代浏览器都支持它,但其实现各不相同。在较旧的浏览器中,即使是关键字 none 也不会对跨不同浏览器的所有表单元素产生相同的效果,有些甚至根本不支持它。在最新的浏览器中差异较小。
因此,虽然它对于自定义单选按钮(以及默认情况下由系统 UI 控制的其他标准 UI 元素)来说是一个非常有用的属性,但在将其推送到产品之前应该对其进行彻底测试。