2016-10-29 19 views
0

私は通常のチェックボックス要素を置き換えるために画像を使用しています。画像をグレーにするように選択していない場合は、視覚効果のフィルタプロパティを使用しています。子要素からプロパティを削除するにはどうすればよいですか?

.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を使用します)?

答えて

2

デモ: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; 
} 
+0

あなたのソリューションは非常に有用でした。 – blsn

-1

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

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

+0

テキストが画像とともに消えるため、この回答は間違っています – blsn

関連する問題