css - 复选框十字标记对齐修复

Question

我需要在未选中的复选框内显示一个十字标记。我写了这样的代码：

HTML：

<input type="checkbox" class="cls-1"/>

CSS：

.cls-1:not(:checked):after {
    content: '\00D7';
    margin: 0px 0px 0px 2px;
}

十字标记的对齐虽然不正确。复选框顶部和十字标记顶部之间出现一个空格。有没有办法让十字标记正好出现在中心。

Stackblitz 的示例代码可以在这里找到：https ://stackblitz.com/edit/js-ul1sgb

标签： css

Answer 1

您可以尝试在输入类型复选框中添加 line-height 属性，例如 10px；例如：

input {
  line-height: 10px;
}