Top part of checkbox do not work after resizing it and resetting materialize

The top part of my checkbox do not word anymore after resizing it and resetting materialize.

Here is sample code:

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <style>
    [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: 0px;
    }
    </style>
</head>

<body>
    <form action="">
        <label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

Here is the jsfiddle for you to try to click the top part of the checkbox if you want: https://jsfiddle.net/j4oxgmtc/

Any idea or solution?

Thank you!

Solution

Andreas responded to that question in a comment: Exclude materialize css for some specific checkbox

''This happens, because is an inline element. You can set display: inline-block for it to fix it.''

Here is the modified working code: https://jsfiddle.net/vL3fsqjb/2/

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[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: 0px;
}
</style>