自定义复选框和自定义单选框的 CSS答案

【问题标题】：CSS for custom checkbox and custom radio box自定义复选框和自定义单选框的 CSS
【发布时间】：2016-06-11 00:55:14
【问题描述】：

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

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，请随意使用它。

谢谢

【问题讨论】：

line-height == height ... jsfiddle.net/Lqfty04x/1
不错的尝试。但复选框不是垂直对齐中心。此外，单选按钮的点似乎不是水平对齐（稍微正确）。你介意看看吗
jsfiddle.net/Lqfty04x/2 ... 只需更改复选框的行高，“似乎”未对齐但它居中
@DaniP 您应该将其发布为答案。
这是对这样的元素使用“内容”的棘手部分，字体会在设备和查看器之间发生变化。

标签： html css mobile checkbox radio-button

【解决方案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>

【讨论】：