html radio 背景颜色,用纯CSS改变html radio/checkbox默认背景颜色样式

checkbox/ radoi默认不支持更改背景颜色，这里可以使用伪类来实现。基本原理是利用after/ before插入新的元素。而后利用新元素的背景颜色或者背景图片覆盖掉原来的样式。

CSS代码：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 示例：plus

minus

plus

minus

对前台的技术，架构技术感兴趣的同学关注我的头条号，并在后端私信发送关键字：“前 端”就可加入前台大佬交流裙