Exclude materialize css for some specific checkbox

Question

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>

Answer 1

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.