物化CSS复选框未正确对齐

问题描述

在我自己的Web开发中忽略了此问题。

使用我的标记（包括实现）：

<label>
   <input style="padding-top: 5px;" type="checkBox" class="filled-in" />
   <span>Hyper (+$5)</span>
</label>

当我检查结果时，我得到一个如下所示的复选框：

如何解决此问题，使其与我的文字正确对齐？

解决方法

您可以添加以下CSS样式：

[type="checkbox"] .filled-in :not(:checked) + span:not(.lever):after {
    margin-top: 3px;
}

[type="checkbox"] .filled-in:checked + span:not(.lever):after {
    margin-top: 3px;
}

这将使您的对齐方式固定。您还可以在forms/_checkboxes.scss的两个位置更改要编译的SCSS。

截至今天（2020年9月），在134和158之间添加：

margin-top: 3px;