Question

我有一个自定义复选框，应该适用于所有浏览器，但我遇到IE，EDGE和FireFox的问题

FireFox，Edge和IE

问题是勾选是黑色和方形复选框

任何人都知道为什么，因为我认为这段代码是跨浏览器兼容的。

.regular-checkbox {
  display: inline-block;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 18px;
  /* Firefox 1-3.6 */
  -moz-border-radius: 18px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
  background-color: white !important;
}
.regular-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.regular-checkbox:checked:after {
  content: '\2714';
  position: absolute;
  color: green;
  font-size: 37px;
  top: 0;
}

<input type='checkbox' class='regular-checkbox' checked />

Answer 1

嗯，它不是跨浏览器兼容的。 -webkit-appearance和-moz-appearance不是标准的，不应该使用，它们在不同的浏览器中的行为也不同。

我的建议是使用输入和标签的组合，您将隐藏复选框输入并使用背景图像作为复选框。另外，请确保不要因为可访问性而使用display：none隐藏输入。

示例：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms

自定义复选框浏览器交叉兼容

1 个答案: