如何使用CSS更改输入复选框的背景色？[重复]

我总是使用伪元素

:before

:after

脚步

1. 使用诸如

   visibility:hidden

   或

   opacity:0

   或

   position:absolute;left:-9999px

   等的CSS规则隐藏默认复选框。
2. 使用

   :before

   element 创建一个伪造的复选框，并传递一个空白或不间断的空格

   '0a0'

   ；
3. 复选框处于

   :checked

   状态时，传递unipre

   content: "2713"

   ，即选中标记；
4. 添加

   :focus

   样式以使复选框可访问。
5. 完成了

这是我的方法。

.box {  background: #666666;  color: #ffffff;  width: 250px;  padding: 10px;  margin: 1em auto;}p {  margin: 1.5em 0;  padding: 0;}input[type="checkbox"] {  visibility: hidden;}label {  cursor: pointer;}input[type="checkbox"] + label:before {  border: 1px solid #333;  content: "0a0";  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;}input[type="checkbox"]:focus + label::before {    outline: rgb(59, 153, 252) auto 5px;}<div >  <div >    <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>

更时尚的使用

:before

:after

body{  font-family: sans-serif;}.container {    margin-top: 50px;    margin-left: 20px;    margin-right: 20px;}.checkbox {    width: 100%;    margin: 15px auto;    position: relative;    display: block;}.checkbox input[type="checkbox"] {    width: auto;    opacity: 0.00000001;    position: absolute;    left: 0;    margin-left: -20px;}.checkbox label {    position: relative;}.checkbox label:before {    content: '';    position: absolute;    left: 0;    top: 0;    margin: 4px;    width: 22px;    height: 22px;    transition: transform 0.28s ease;    border-radius: 3px;    border: 2px solid #7bbe72;}.checkbox label:after {  content: '';    display: block;    width: 10px;    height: 5px;    border-bottom: 2px solid #7bbe72;    border-left: 2px solid #7bbe72;    -webkit-transform: rotate(-45deg) scale(0);    transform: rotate(-45deg) scale(0);    transition: transform ease 0.25s;    will-change: transform;    position: absolute;    top: 12px;    left: 10px;}.checkbox input[type="checkbox"]:checked ~ label::before {    color: #7bbe72;}.checkbox input[type="checkbox"]:checked ~ label::after {    -webkit-transform: rotate(-45deg) scale(1);    transform: rotate(-45deg) scale(1);}.checkbox label {    min-height: 34px;    display: block;    padding-left: 40px;    margin-bottom: 0;    font-weight: normal;    cursor: pointer;    vertical-align: sub;}.checkbox label span {    position: absolute;    top: 50%;    -webkit-transform: translateY(-50%);    transform: translateY(-50%);}.checkbox input[type="checkbox"]:focus + label::before {    outline: 0;}<div >  <div >     <input type="checkbox" id="checkbox" name="" value="">     <label for="checkbox"><span>Checkbox</span></label>  </div>  <div >     <input type="checkbox" id="checkbox2" name="" value="">     <label for="checkbox2"><span>Checkbox</span></label>  </div></div>