html - 自定义复选框和自定义单选框的 CSS

Question

我已经实现了这样的自定义复选框和单选框

https://jsfiddle.net/Lqfty04x/

input[type=radio]:checked + label:before {
    content: "\2022";
    color: #AD7471;
    font-size: 35px;
    text-align: center;
    line-height: 16px;
}

input[type=checkbox]:checked + label:before {
    content: "\2713";
    font-size: 17px;
    font-weight:bold;
    color: #AD7471;
    text-align: center;
    line-height: 100%;
}

问题是，单选框内的点和复选框内的勾号不是垂直居中对齐，它在桌面上工作正常但在移动设备上它下降了，

花了一些时间，怀疑是因为行高，它不稳定，找不到适合所有情况的数字

如何解决？提供了 jsfiddle，请随意使用它。

谢谢

Answer 1

我建议在标准 unicode 字符上使用 Font Awesome 等网络字体图标，以便它在不同的浏览器和设备上为您提供一致的结果。

label {
  display: inline-block;
  margin: 8px 4px;
}
input[type="radio"],
input[type="checkbox"] {
  display: none;
}
input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: "FontAwesome";
  font-size: 16px;
  display: inline-block;
  width: 18px;
}
input[type="radio"] + span:before {
  content: "\f1db";
}
input[type="radio"]:checked + span:before {
  content: "\f192";
}
input[type="checkbox"] + span:before {
  content: "\f096";
}
input[type="checkbox"]:checked + span:before {
  content: "\f046";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

<label>
  <input type="radio" name="test" checked> <span>Radio 1</span>
</label>

<label>
  <input type="radio" name="test"> <span>Radio 2</span>
</label>

<label>
  <input type="checkbox" name="test" checked> <span>Checkbox 1</span>
</label>

<label>
  <input type="checkbox" name="test"> <span>Checkbox 2</span>
</label>