blsn blsn - 1 month ago 11
CSS Question

Unmatched span tag in checkbox element with label

I’m using an image to replace the regular checkbox element, and the filter property for visual effects when unchecked selected to gray the image.



.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>





The problem is that the span is influenced by the filter so we can’t read the text when changing between states (checked/unchecked).

How to make the span unaffected by the filter (use native CSS)?

Answer

Demo: https://jsfiddle.net/z63b6qwL/

You can't remove filter from child element, but you can change your html and css a little:

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;
}