子要素からプロパティを削除するにはどうすればよいですか？

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

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

問題は（チェック/オフ）の状態を変更するとき、我々はテキストを読むことができませんので、スパンがフィルタの影響を受けているということです。

スパンをフィルタの影響を受けないようにするには（ネイティブ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

子供の中にラベルの背景を設定するだけです。テキストにスタイルを適用しなくても、好きなようにイメージをスタイルできます。

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