如何從子元素中刪除屬性？

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>