如何用css更改输入复选框的背景颜色？

这个问题在这里已经有一个答案：> How to style checkbox using CSS?21
> CSS ”background-color” attribute not working on checkbox inside <div>5个
你好朋友,我想要做的是改变一个复选框的背景颜色.我累了很多东西,但没有什么工作.可以帮忙吗

input[type="checkBox"] {
      background: #3d404e;
      border: #7f83a2 1px solid;
   }

解决方法

我总是使用伪元素：之前和之后用于更改复选框和单选按钮的外观.它的作品就像一个魅力.它是纯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;
}

<div class="content">
  <div class="Box">
    <p>
      <input type="checkBox" id="c1" name="cb">
      <label for="c1">Option 01</label>
    </p>
    <p>
      <input type="checkBox" id="c2" name="cb">
      <label for="c2">Option 02</label>
    </p>
    <p>
      <input type="checkBox" id="c3" name="cb">
      <label for="c3">Option 03</label>
    </p>
  </div>
</div>

原文地址：https://www.jb51.cc/css/214151.html