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

【问题标题】：custom check box browser cross compatible自定义复选框浏览器交叉兼容
【发布时间】：2017-01-23 21:15:44
【问题描述】：

我有一个自定义复选框，应该可以在所有浏览器上使用，但是我遇到了 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;
}

&lt;input type='checkbox' class='regular-checkbox' checked /&gt;

【问题讨论】：

“因为我认为这段代码是跨浏览器兼容的” - 好吧，它不是。许多浏览器允许对表单元素进行很少的格式化——甚至要求圆角边框可能已经太多了。这就是为什么大多数自定义复选框解决方案只隐藏原始复选框元素，而不是尝试对其进行格式化 - 然后将格式化应用于其他元素。并且 ::before/::after 伪元素应该被渲染为好像插入了任何实际的子元素 - 但input 不能有子元素，因此在这些元素上使用生成的内容可能也不适用于所有浏览器。
我明白，这就是为什么我在浏览器上隐藏标准检查“外观：无；”
这不会隐藏元素，它只会阻止浏览器使它看起来像它的“默认”复选框。但这与我提到的问题无关。

标签： html css cross-browser

【解决方案1】：

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

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

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

【讨论】：