介绍保证金:3 px 3 px 0 px 5 px;
边界:没有0;
填充:0;
box-sizing: border-box;
显示:inline-block;
行高:正常;
位置:静态; outline-offset: 0 px;
大纲:-webkit-focu-ring-color汽车5 px; 颜色:rgb (84、84、84); 标签。无线电{/*保证布局特性保持一致*/保证金:3 px 3 px 0 px 5 px;
显示:inline-block;
box-sizing: border-box;
宽:12 px;
高度:12 px;
}
.radio__appearance {
显示:块;/*设置为块则不受vertical-align影响,从而不会意外影响到。电台的linebox高度*/位置:相对;
不必:0 0 0 1 px番茄;/*不必不像边境那样会影响盒子的框高*/这个特性:50%;
高度:90%;
宽度:90%;
text-align:中心;
}
标签。广播(type=无线电)+ .radio__appearance:{之前
内容:““;
显示:块;
这个特性:50%;
宽度:85%;
高度:85%;
位置:绝对的;
上图:50%;
左:50%;
变换:翻译(-50%,-50%);
过渡:背景。3;
}
标签。电台(type=无线电):检查+ .radio__appearance::{之前
背景:番茄;
}
标签。广播(type=无线电)(残疾人)+ .radio__appearance {
透明度:5;
}
label.radio:专注{
outline-offset: 0 px;
大纲:# 999汽车5 px;
}/*通过鼠标单击获得焦点时,轮廓效果不生效*/label.radio.clicked {
大纲:没有0;
}/*自定义单选框的行为主要是基于原生单选框的,因此先将原生单选框隐藏*/标签。收音机输入{
显示:没有;
} & lt; !——未选中状态——比;
& lt;标签类=皉adio"tabindex=?”在
& lt;输入类型=皉adio"name=癮"比;
& lt;我类=皉adio__appearance"祝辞& lt;/i>
& lt;/label>
& lt; br>
& lt; !——选中状态——比;
& lt;标签类=皉adio"tabindex=?”在
& lt;输入类型=皉adio"name=癮"checked>
& lt;我类=皉adio__appearance"祝辞& lt;/i>
& lt;/label>
& lt; br>
& lt; !——禁用状态——比;
& lt;标签类=皉adio"祝辞
& lt;输入类型=皉adio"name=癮"disabled>
& lt;我类=皉adio__appearance"祝辞& lt;/i>
& lt;/label> var收音机=document.querySelectorAll (“.radio")
收音机。forEach(无线电=比;{//模拟鼠标点击后:专注样式无效
radio.addEventListener (“mousedown", e=比;{
var焦油=e.currentTarget
tar.classList.add (“clicked")
var fp=setInterval(函数(){
如果文档。activeElement !=焦油){
tar.classList.remove (“clicked")
clearInterval (fp)
}
},400)
})//模拟通过键盘获得焦点后,按“空间”键执行选中操作
radio.addEventListener (“keydown", e=比;{
如果(e。键码===32){
e.target.click ()
}
})
})
这篇文章将为大家详细讲解有关css如何改变单选框颜色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>单选框了解一下
由于我们的目标是改变单选框颜色,其他外观特征和行为与原来的单选框一致,那么我们就必须先了解单选框原来的外观特征和行为主要有哪些。
1。外观特征
1.1。常态样式
注意:外观上我们必须要保证布局特性和原生的一致,否则采用自定义单选框替换后很大机会会影响整体的布局,最后导致被迫调整其他元素的布局特性来达到整体的协调,从而扩大了修改范围。
1.2。获得焦点的样式
注意:这里的获取焦点的样式仅通过键盘Tab键才生效,若通过鼠标点击虽然单选框已获得焦点,但上述样式并不会生效。
1.3。设置为残疾的样式
2。行为特征
?单选框的行为特征,明显就是选中与否,及选中状态的改变事件,因此我们必须保持对外提供<代码> 改变事件。
?另外值得注意的是,当通过键盘的<代码>选项卡> 键空间则会选中该单选框。
?有了上述的了解,我们可以开始着手撸代码了!
<强>少废话,撸代码
上图中左侧就是原生单选框,右侧为我们自定义的单选框。从上到下依次为未选中, 选中, 获得焦点和 禁用状态的样式。
CSS部分
HTML部分
JavaScript部分
