html改变radio圆点颜⾊,⽤纯CSS改变htmlradiocheckbox默认
背景颜⾊样式
checkbox/ radoi默认不⽀持更改背景颜⾊，这⾥能够使⽤伪类来实现。基本原理是利⽤after/ before插⼊新的元素。⽽后利⽤新元素的背景颜⾊或背景图⽚覆盖掉原来的样式。web
CSS代码：svg
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
}
input[type=radio] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=radio]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000; color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 50%;
}
input[type=radio]:checked:before { content: "✓";
display: block;
position: relative;
top: -2px;
left: 3px;
width: 6px;
height: 6px;
color: #fff;
font-weight: 400;
z-index: 1;
}
HTML ⽰例：code
plus
minus
plus
htmlradio的text出不来minus

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。