Question

在选中复选框后，我试图在标签的元素之前设置一个css :: 可能吗？如果是我该怎么办？

我有一个复选框和一个标签：

<div class="remember">
    <label for="remember-me" class="block">Remember Me</label>
    <input type="checkbox" id="remember-me">
</div>

我试图用css做这样的事情：

.remember input[type=checkbox]:checked + label::before{
    content: '';
    background-color: #7b519d;
}

I made a fiddle

Answer 1

不幸的是，在CSS中，没有preceding-sibling（或parent）选择器;因此，我们无法根据其后续<label>兄弟的状态（:checked或其他方式）设置<input>的样式。发布的CSS：

.remember input[type=checkbox]:checked + label::before{
    content: '';
    background-color: #7b519d;
}

仅当<input>元素位于<label>：

之前时才会起作用

<div class="remember">
  <input type="checkbox" id="remember-me">
  <label for="remember-me" class="block">Remember Me</label>
</div>

/* Setting the defaults for the unchecked state: */
.remember input[type=checkbox] + label::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
}

.remember input[type=checkbox]:checked + label::before {
  content: '';
  background-color: #7b519d;
}

<div class="remember">
  <input type="checkbox" id="remember-me">
  <label for="remember-me" class="block">Remember Me</label>
</div>

虽然您可以使用float在<label>之前可视地移动<input>：

.remember input[type=checkbox] + label {
  float: left;
}

.remember input[type=checkbox] + label {
  float: left;
}

.remember input[type=checkbox] + label::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
}

.remember input[type=checkbox]:checked + label::before {
  content: '';
  background-color: #7b519d;
}

<div class="remember">
  <input type="checkbox" id="remember-me">
  <label for="remember-me" class="block">Remember Me</label>
</div>

或者，根据您的跨浏览器要求，您可以使用flex-box并利用order属性（以及各种供应商前缀实现）来正确定位元素（{{1} order: 1的{{1}}和<label>的{{1}}：

order: 2

<input>

（请注意，上述用于flexbox演示的CSS或多或少全部来自the-echoplex.net's "Flexy Boxes" playground。）

参考文献：

Adjacent-sibling (+) combinator。
Attribute selectors。
“CSS Flexible Box Layout Module - Level 1”。
float ("Visual Formatting Model"。
“Using CSS Flexible boxes”。

在复选复选框的标签之前是否可以样式::

1 个答案: