我想给我的复选框bakground颜色。 这是我的代码
null
input[type='checkbox'] {
width: 20px;
height: 20px;
background: white;
border-radius: 5px;
border: 2px solid red;
vertical-align: middle;
margin: 10px;
cursor: pointer;
}<div class="card-header">
<input type="checkbox" class="customCheckBox" name="checkbox">
<span>data:
<span class="font-weight-bold">user</span>
</span>
</div>null
但是，复选框不获取背景色。 我哪里做错了？
浏览器本机为许多输入类型提供一些样式。 如果你想重写这些，你必须自己重做很多，但是这是可行的（而且经常会做）。 您只需使用以下命令来防止默认外观:
-moz-appearance: none;
-webkit-appearance: none;
现在您可以看到复选框可以有红色背景。 但复选标记不再显示。
null
input[type='checkbox'] {
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 5px;
border: 2px solid red;
vertical-align: middle;
margin: 10px;
cursor: pointer;
}<div class="card-header">
<input type="checkbox" class="customCheckBox" name="checkbox">
<span>data:
<span class="font-weight-bold">user</span>
</span>
</div>
null
input[type='checkbox'] {
appearance:none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: white;
border-radius: 5px;
border: 2px solid red;
vertical-align: middle;
margin: 10px;
cursor: pointer;
background:red;
}
input:checked{
border: 2px solid blue;
background:blue;
color:white
}<div class="card-header">
<input type="checkbox" class="customCheckBox" name="checkbox">
<span>data:
<span class="font-weight-bold">user</span></label>
</span>
</div>