Question

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

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等Web字体图标，以便在不同的浏览器和设备上提供一致的结果。

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

用于自定义复选框和自定义单选框的CSS

1 个答案: