复选框的顶部在调整大小并重置实现后不起作用

Question

我的复选框的顶部在调整大小并重置具体化后不再显示。

示例代码如下：

<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>

这里是 jsfiddle，您可以根据需要尝试单击复选框的顶部： https://jsfiddle.net/j4oxgmtc/

有什么想法或解决方案吗？

谢谢！

Answer 1

Andreas 在评论中回答了该问题：

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

这里是修改后的工作代码：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>

复选框的顶部在调整大小并重置实现后不起作用

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

css

checkbox

materialize