复选标记转义复选框

Question

我正在尝试编写 CSS 代码来模仿和设置复选框的样式，因为 input type="checkbox" 无法被风格化。

这是我的 HTML 和 CSS:

label > input[type="checkbox"] + span::before {
    content: "✓";
    width: 20pt;
    height: 20pt;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;

    display: inline-block;
    vertical-align: middle;

}

<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span> shirt </span>
    <br>
</label>

我想要的行为是：

空白正方形垂直居中
复选标记在正方形内

正方形居中，但复选标记“✓”保留在底部并且与复选框右侧的文本处于同一水平。我尝试了 display 和 vertical-align 的不同组合，但没有任何效果。我怎样才能使复选标记居中？

Answer 1

我觉得你的代码应该是这样的

label > input[type="checkbox"] + span {
    position: relative;
    width: 17px;
    height: 17px;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;
    display: inline-block;
    vertical-align: middle;
} 
label > input[type="checkbox"] {
    display: none
} 
label > input[type="checkbox"]:checked + span::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
label  {
  padding
}

<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span></span>
    <span> shirt </span>
    <br>
</label>

Answer 2

您可以使用 text-align: center 水平居中，line-height: {number}px 垂直居中。我建议您使用 flex-box 来更有效地管理对齐。但是对于您的示例，您可以按照我的示例进行操作：

label > input[type="checkbox"] {
  display: none;
}

label > input[type="checkbox"] + span::before {
    content: "✓";
    width: 20pt;
    height: 20pt;
    border-radius: 10%;
    border-style: solid;
    border-width: 0.1rem;
    border-color: gray;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    


} 

label > input[type="checkbox"]:checked + span::before {
 content: ' ';
}

<label>
    <input type="checkbox" name="pos[]" value="shirt" />
    <span> shirt </span>
    <br>
</label>

复选标记转义复选框

Check mark escapes checkbox

html

css

checkbox