代码之家 › 专栏 › 技术社区 › swaroop pallapothu

排除某些特定复选框的物化CSS

materialize checkbox css3 css html

2

swaroop pallapothu · 技术社区 · 7 年前

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

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

<div class=“checkbox”>
<input type=“checkbox”class=“filled in dt checkbox”>
<label></label>
</DIV>
.

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

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

1 回复 | 直到 7 年前

1

3

andreas 7 年前

opacity: 0;
::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>