html - -webkit-appearance 在 CSS3 和 IE 中等效

Question

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

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

• IE equivalent to -webkit-appearance?
• MSDN | -webkit-appearance property
• css3 appearance property for IE
• CSS Appearance

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