排除某些特定复选框的实现CSS [英] Exclude materialize css for some specific checkbox

问题描述

我想在我的视图中排除某些项目的实现CSS.例如:我不想在表格下的复选框中显示实体化样式.它导致我的内部jquery库出现问题.请检查所附图片.我在表格> td中提供了以下html内容.我想将此显示为浏览器默认复选框.

在我的应用程序中，我正在使用

解决方案

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

1. 真实"商品复选框已通过 opacity:0; 和某些位置
删除
2. 假"商品复选框是在< span> 元素
上的伪元素 :: before 和 :: after 的帮助下创建的

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

  [type ="checkbox"].reset-checkbox，[type ="checkbox"].reset-checkbox:已选中，[type ="checkbox"].reset-checkbox:not(选中){不透明度:1；职位:相对}[type ="checkbox"].reset-checkbox + span ::之前，[type ="checkbox"].reset-checkbox + span :: after，[type ="checkbox"].reset-checkbox:checked + span :: before，[type ="checkbox"].reset-checkbox:checked + span ::之后{显示:无；}[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><标签>< input type ="checkbox" class ="filled-in"/>< span>使用Materialize</span>进行测试.</label></div>< div><标签>< input type ="checkbox" class =填写后的重置复选框"/>< span>删除样式的测试</span></label></div></form>  

请注意此处选择器的更高特异性，以确保实体化样式被覆盖.

I want to exclude materialize css for some items in my view. Eg: i dont want to display materialize styles to check box under table. It causes problems with my internal jquery library. Please check attached image. I gave below html content in my table > td. I want to display this as browser default checkbox.

In my application i am using http://materializecss.com

<div class="checkbox">
    <input type="checkbox" class="filled-in dt-checkboxes">
    <label></label>
</div>

解决方案

To remove the Materialize styles from the checkboxes, you first need to understand how the Materialize checkboxes are created:

1. The "real" checkbox is removed with opacity: 0; and some positioning
2. A "fake" checkbox is created with the help of the pseudo elements ::before and ::after on the <span> element

So all you need to do is hide the pseudo elements and make the real checkbox visible again. I created a class .reset-checkbox to demonstrate the effect:

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

Pay attention to a higher specificity of the selectors here, to make sure that the Materialize styles are overwritten.

这篇关于排除某些特定复选框的实现CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！