为某些特定复选框排除具体化css
为某些特定复选框排除具体化css
提问于 2018-07-31 21:43:22
我想为我视图中的一些项目排除materialize css。例如:我不想在表格下面显示物化样式复选框。它会导致我的内部jquery库出现问题。请检查所附图片。我在我的表格> td中给出了下面的html内容。我想将此显示为浏览器默认复选框。
在我的应用程序中，我使用了http://materializecss.com
<div class="checkbox">
<input type="checkbox" class="filled-in dt-checkboxes">
<label></label>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-31 22:15:46
要从复选框中删除实体化样式，首先需要了解如何创建实体化复选框：
- 使用
opacity: 0;和一些定位 - 移除“真实”复选框借助伪元素
::before和::after在<span>元素
<代码>G29上创建“假”复选框
因此，您需要做的就是隐藏伪元素，并使real复选框再次可见。我创建了一个.reset-checkbox类来演示效果：
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<form action="#">
<div>
<label>
<input type="checkbox" class="filled-in" />
<span>Test with Materialize</span>
</label>
</div>
<div>
<label>
<input type="checkbox" class="filled-in reset-checkbox" />
<span>Test with removed styles</span>
</label>
</div>
</form>
注意这里选择器的更高的特异性，以确保物化样式被覆盖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51614859
复制相关文章
相似问题
腾讯云开发者
