-webkit-appearance 在 CSS3 和 IE 中等效答案

【问题标题】：-webkit-appearance equivalent in CSS3 and IE-webkit-appearance 在 CSS3 和 IE 中等效
【发布时间】：2017-04-17 04:28:48
【问题描述】：

一段时间以来，我一直在为appearance:none 寻找一个好的替代方案。我需要有一个看起来不同的复选框。

我还知道 CSS3 将放弃 appearance，尽管现在主流浏览器都支持它。那么，如果我打算保留复选框而不使用按钮，那么更好的选择是什么？

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

你可以试试这个

input[type="checkbox"].novisible {
    display: none;
}
.checkboxCl {
  border:1px solid #333;
  width:30px;
  height:30px;
  display:block;
}
input[type="checkbox"].novisible:checked + label {
  border:1px solid red;
  width:30px;
  height:30px;
  background:url("http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark-hi.png") 0 0 no-repeat;
  background-size:cover;
}

   <input type="checkbox" class="novisible" id="checkBox">
   <label for="checkBox" class="checkboxCl"></label>

【讨论】：

【解决方案2】：

您可以尝试以下方法。这是文档中的link。

your selector::-ms-check {
your styles
}

【讨论】：

【解决方案3】：

经过长时间的搜索，我找到了appearance 属性的替代方法。

最简单的方法是使用:after 和:before 并隐藏应用的对象。

另外，需要注意的是，如果属性是复选框/单选按钮，IE 不会添加任何内容。确保添加标签并为此添加:after 或:before。

【讨论】：