不同浏览器中的复选框/单选按钮显示问题的解决方法可以通过以下几种方式实现:
和
标签,并使用CSS对其样式进行自定义。
/* CSS Reset */
input[type="checkbox"], input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
background-color: transparent;
}
/* 自定义样式 */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #000;
background-color: #fff;
margin-right: 8px;
vertical-align: middle;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background-color: #000;
}
/* 其他样式 */
input[type="checkbox"] + label,
input[type="radio"] + label {
font-size: 14px;
line-height: 1.5;
color: #000;
}
以上是几种解决不同浏览器中复选框/单选按钮显示问题的方法,您可以根据具体情况选择适合您的方式实现。