您的背景和边框在此方法中正常工作.

这是我怎么做

.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>