Question

我使用此admin panel获取灵感，并在此过程中学习。我已尝试至少花一个小时尝试复制使用的复选框，如下所示;

这个方法似乎很简单，但我似乎无法掌握;

<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
    <input type="checkbox" class="mail-group-checkbox">
    <span></span>
</label>

有我的admin panel我正在努力转发给我的开发人员，我的更多是一个概念和实践。

其他信息

我想了解有关所用复选框的更多信息，因为它们似乎不是包含图片的自定义复选框，但如果您删除<span></span>，则会删除可见的复选框。

使用这种方法是否有优势，因为我知道你可以缩放一个复选框，但这可以扩展所有内容，包括刻度线等等。

Answer 1

<input type="checkbox">不可见，仅用于在:active和:not(:active)之间切换状态。

它包含在<label>内，因为点击<label>内的任何内容都会改变<input type="checkbox">元素的状态。

最后，<span>用于设置您想要的可见复选框的样式。然后，您使用label input[type="checkbox"] + span和label input[type="checkbox"]:active + span设置<span>。

的样式

+解决了“下一个兄弟元素”。 <input type="checkbox">的下一个兄弟是<span>元素。这样你就可以“打开和关闭”它。

这样，你“可见的复选框”可以是你想要的任何东西，不需要Javascript。隐藏的真实复选框是随表单提交的复选框，无需额外的工作。