我正在使用图像替换常规的复选框元素,并且在未选中时选择视觉效果的过滤器属性使图像变灰。
.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>
问题是跨度受过滤器的影响,因此我们无法在更改状态(选中/未选中)时读取文本。
如何使跨度不受过滤器影响(使用原生 CSS)?
最佳答案
演示: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;
}
关于html - 如何从子元素中删除属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40317365/