排除某些特定复选框的实现 css

Question

我想排除某些项目的实现 css。例如：我不想在 table 下显示实体化样式以选中复选框。它会导致我的内部 jquery 库出现问题。请检查附图。我在 table > td 中提供了以下 html 内容。我想将其显示为浏览器默认复选框。

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

Answer 1

要从复选框中删除 Materialize 样式，您首先需要了解如何创建 Materialize 复选框：

删除了“真实”复选框 opacity: 0; 和一些定位
在 <span> 元素

::before

::after

所以您需要做的就是隐藏伪元素并使真正的复选框再次可见。我创建了一个class .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>

注意此处选择器的更高特异性，以确保覆盖 Materialise 样式。

排除某些特定复选框的实现 css

Exclude materialize css for some specific checkbox

html

css

checkbox

materialize