是否可以在选中的复选框标签之前设置 ::before 样式？

Question

我正在尝试在选中复选框后为标签的 css 注入 ::before 元素设置样式。可能吗？如果是怎么办？

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

<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 (or parent)选择器；因此我们无法根据其后续 <input> 兄弟的状态（:checked 或其他）来设置 <label> 的样式。已发布 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 属性（以及各种带有供应商前缀的实现）来定位元素正确（order: 1 对于 <label> 和 order: 2 对于 <input>）：

.remember {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: start;
  -moz-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.remember input:nth-child(1) {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.remember label:nth-child(2) {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.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>

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

参考文献：

是否可以在选中的复选框标签之前设置 ::before 样式？

Is it possible to style ::before of a checked checkbox's label?

html

css

css-selectors