无法使用CSS样式化复选框？

Question

我甚至点击了Google搜索结果的第二页，想找出问题出在哪里，并且已经这样做了至少三个小时。我哪里看错了？没有任何css代码能够触及复选框。 Codepen HTML

<div>
    <input type="checkbox" id="checkbox-1" />
    <label for="checkbox-1">Enable cat</label>
</div>

CSS

#checkbox-1:before + label{ 
    background-color: yellow;
    color: yellow;
    background: red;
    outline: 2px solid red;
}

#checkbox-1:checked + label{ 
    background-color: yellow;
    color: yellow;
    background: red;
}

- violetto

---

你想要给复选框添加样式吗？ - Ganesh Salunkhe

你能详细说明你想要什么吗？ - Swapnil Motewar

Answer 1

您可以自定义复选框，供参考。

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 17px; height: 17px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 0; left: 4px;
  font-size: 14px;
  color: #09ad7e;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 1px solid #4778d9!important;
}






/* Useless styles, just for demo design */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}
h1, h2 {
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
}
h2 {
  margin: 5px 0 2em;
  color: #aaa;
}
form {
  width: 80px;
  margin: 0 auto;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #4778d9;
}

<h1>Custom checkboxes with CSS only</h1>
<h2>"automatic" fallback for IE</h2>

<form action="#">
  <p>
    <input type="checkbox" id="test1" />
    <label for="test1">Red</label>
  </p>
  <p>
    <input type="checkbox" id="test2" checked="checked" />
    <label for="test2">Yellow</label>
  </p>
  <p>
    <input type="checkbox" id="test3" checked="checked" disabled="disabled" />
    <label for="test3">Green</label>
  </p>
    <p>
      <input type="checkbox" id="test4" disabled="disabled" />
      <label for="test4">Brown</label>
  </p>
</form>



<p class="txtcenter">Custom styles on modern browsers.<br/>Classical checkboxes on IE8 and lower.</p>

- Swapnil Motewar

Answer 2

/* SLIDE ONE */
.slideOne {
 width: 50px;
 height: 10px;
 background: #333;
 margin: 20px auto;

 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 position: relative;

 -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
 -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
 box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideOne label {
 display: block;
 width: 16px;
 height: 16px;

 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;

 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 -ms-transition: all .4s ease;
 transition: all .4s ease;
 cursor: pointer;
 position: absolute;
 top: -3px;
 left: -3px;

 -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
 box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
 background: #fcfff4;

 background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideOne input[type=checkbox]:checked + label {
 left: 37px;
}

<div class="slideOne"> 
 <input type="checkbox" value="None" id="slideOne" name="check" />
 <label for="slideOne"></label>
</div>

查看Domo

参考：这里

- Ganesh Salunkhe