Question

我正在尝试创建两个变体的自定义复选框：一个用于多个复选框，另一个用于单个复选框（开/关）。在CSS中，当我试图仅选择具有适当类的元素时（对于第二种情况），没有任何反应。我确实错误地在下面的CSS声明中，但是什么样的？谢谢！

input[type="checkbox"][class="toggle"]:not(:checked) + label:before,
input[type="checkbox"][class="toggle"]:checked + label:before {
    background: red;
}

/*CHECKBOX STYLING*/
/*font styling*/

/* Base for label styling */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 42px;
  cursor: pointer;
  font-size: 16pt;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 0px;
  width: 22px; height: 22px;
  border: 2px solid #d7d6d5;
  border-radius: 4px;
  background: #f1f5f8;
}
[type="checkbox"]:checked + label:before{
    border-color: #555555;
}

input[type="checkbox"][class="toggle"]:not(:checked) + label:before,
input[type="checkbox"][class="toggle"]:checked + label:before {
    background: red;
}

 /*checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\e909';
  font-family: 'icomoon';
  position: absolute;
  top: 8px; left: 4px;
  font-size: 10pt;
  line-height: 0.8;
  color: #555555;
}
/* 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);
}

      <div class="checkbox">
            <form action="#">
                <p>
                <input id="check1" type="checkbox" name="check" checked="checked" >
                <label for="check1">Checked value</label>
                </p>
               
                <p>
                <input id="check2" type="checkbox" name="check"">
                <label for="check2">Unchecked value</label>
                </p>
                
                <p>
                <input id="check3" type="checkbox">
                <label for="check3" class="toggle">Only two values</label>  
                </p>
                
            </form>
        </div>

Answer 1

该类位于127.0.0.1:8000/static/files/etc.jpg，而不是<label>，因此您应该使用<input>添加类选择器。

<label>

最好使用input[type="checkbox"]:not(:checked) + label.toggle:before, input[type="checkbox"]:checked + label.toggle:before { background: red; }运算符来匹配具有特定类的元素，因为属性选择器.只匹配严格只有[class="toggle"]类的元素

toggle

/*CHECKBOX STYLING*/

/*font styling*/

/* Base for label styling */

input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 42px;
  cursor: pointer;
  font-size: 16pt;
}
/* checkbox aspect */

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
  width: 22px;
  height: 22px;
  border: 2px solid #d7d6d5;
  border-radius: 4px;
  background: #f1f5f8;
}
[type="checkbox"]:checked + label:before {
  border-color: #555555;
}
input[type="checkbox"]:not(:checked) + label.toggle:before,
input[type="checkbox"]:checked + label.toggle:before {
  background: red;
}
/*checked mark aspect */

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\e909';
  font-family: 'icomoon';
  position: absolute;
  top: 8px;
  left: 4px;
  font-size: 10pt;
  line-height: 0.8;
  color: #555555;
}
/* 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);
}

在伪类之前或之前的多个css属性选择器

1 个答案: