私は通常のチェックボックス要素を置き換えるために画像を使用しています。画像をグレーにするように選択していない場合は、視覚効果のフィルタプロパティを使用しています。子要素からプロパティを削除するにはどうすればよいですか?
.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を使用します)?
あなたのソリューションは非常に有用でした。 – blsn