首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为某些特定复选框排除具体化css

为某些特定复选框排除具体化css
EN

Stack Overflow用户
提问于 2018-07-31 21:43:22
回答 1查看 2.4K关注 0票数 3

我想为我视图中的一些项目排除materialize css。例如:我不想在表格下面显示物化样式复选框。它会导致我的内部jquery库出现问题。请检查所附图片。我在我的表格> td中给出了下面的html内容。我想将此显示为浏览器默认复选框。

在我的应用程序中,我使用了http://materializecss.com

代码语言:javascript
复制
<div class="checkbox">
    <input type="checkbox" class="filled-in dt-checkboxes">
    <label></label>
</div>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-31 22:15:46

要从复选框中删除实体化样式,首先需要了解如何创建实体化复选框:

  1. 使用opacity: 0;和一些定位
  2. 移除“真实”复选框借助伪元素::before::after<span>元素

<代码>G29上创建“假”复选框

因此,您需要做的就是隐藏伪元素,并使real复选框再次可见。我创建了一个.reset-checkbox类来演示效果:

代码语言:javascript
复制
[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;
}
代码语言:javascript
复制
<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>

注意这里选择器的更高的特异性,以确保物化样式被覆盖。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51614859

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档