Question

我正在使用图像替换常规复选框元素，并选中未选中时视觉效果的滤镜属性以使图像变灰。

.ckbx {
  display: none;
}
.ckbx + label {
  background: url('https://pixabay.com/static/uploads/photo/2012/04/11/12/08/check-mark-27820_960_720.png') no-repeat;
  background-size: 100%;
  height: 50px;
  width: 50px;
  padding: 0px;
  display: inline-block;
  filter: grayscale(100%) opacity(30%);
}
.ckbx:checked + label {
  filter: none;
}
label span {
  margin-left: 55px;
  display: inline-block;
  width: 200px;
}

<div>
  <input type="checkbox" class="ckbx" id="bike">
  <label for="bike"><span>I have a bike</span></label>
</div>

问题是跨度受过滤器的影响，因此我们无法在更改状态（已选中/未选中）时读取文本。

如何使跨度不受过滤器的影响（使用原生CSS）？

Answer 1

演示：https://jsfiddle.net/z63b6qwL/

您无法从子元素中删除过滤器，但您可以稍微更改html和css：

HTML：

<div>
  <input type="checkbox" class="ckbx" id="bike">
  <label for="bike"><span class="image"></span><span class="text">I have a bike</span></label>
</div>

CSS：

.ckbx {
  display: none;
}
.ckbx + label > .image {
  background: url('https://pixabay.com/static/uploads/photo/2012/04/11/12/08/check-mark-27820_960_720.png') no-repeat;
  background-size: 100%;
  height: 50px;
  width: 50px;
  padding: 0px;
  display: inline-block;
  filter: grayscale(100%) opacity(30%);
  vertical-align: middle;
}
.ckbx:checked + label > .image {
  filter: none;
}
label span.text {
  margin-left: 5px;
  display: inline-block;
  width: 200px;
}

Answer 2

只需在儿童中设置标签的背景。然后，您可以根据需要设置图像样式，而无需在文本中应用样式。

＆＃13;

.ckbx {
  display: none;
}
.check-item {
  height: 50px;
  padding: 0px;
  display: inline-block;
}
.check-item__img {
  background: url('https://pixabay.com/static/uploads/photo/2012/04/11/12/08/check-mark-27820_960_720.png') no-repeat;
  background-size: contain;
  height: 50px;
  width: 50px;
  filter: grayscale(100%) opacity(30%);
}
.ckbx:checked + .check-item .check-item__img {
  filter: none;
}

.check-item__img,
.check-item__text {
  display: inline-block;
}

＆＃13;

<div>
  <input type="checkbox" class="ckbx" id="bike">
  <label for="bike" class="check-item">
    <span class="check-item__img"></span>
    <span class="check-item__text">I have a bike</span>
  </label>
</div>

＆＃13;

如何从子元素中删除属性？

2 个答案: