我总是使用伪元素：之前和之后用于更改复选框和单选按钮的外观.它的作品就像一个魅力.它是纯CSS.
您的背景和边框在此方法中正常工作.
这是我怎么做
.Box {
background: #666666;
color: #ffffff;
width: 250px;
padding: 10px;
margin: 1em auto;
}
p {
margin: 1.5em 0;
padding: 0;
}
input[type="checkBox"] {
display: none;
}
label {
cursor: pointer;
}
input[type="checkBox"] + label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkBox"]:checked + label:before {
background: #fff;
color: #333;
content: "\2713";
text-align: center;
}
input[type="checkBox"]:checked + label:after {
font-weight: bold;
}
Option 01
Option 02
Option 03
