How to remove property from a child element? - html

Question

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 states (checked/unchecked).
How to make the span unaffected by the filter (use native CSS)?

Answer 1

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

Answer 2

Simply set the background of your label inside a child. You will then be able to style your image like you want without applying style to your text.
.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;
}
<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>