排除一些特定复选框的实现CSS

Question

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

在我的应用程序中，我正在使用http://materializecss.com

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

Answer 1

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

1. 已通过opacity: 0;和某些位置删除了“真实”复选框
2. 借助伪元素::before和::after上的伪元素<span>创建一个“伪”复选框

因此，您所需要做的就是隐藏伪元素，并使真实的复选框再次可见。我创建了一个类.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="#">
  <p>
    <label>
    <input type="checkbox" class="filled-in" />
    <span>Test with Materialize</span>
  </label>
  </p>
  <p>
    <label>
    <input type="checkbox" class="filled-in reset-checkbox" />
    <span>Test with removed styles</span>
  </label>
  </p>
</form>

请注意此处选择器的特殊性，以确保实体化样式被覆盖。