Question

我一直在为appearance:none寻找一个好的选择。我需要一个看起来不同的复选框。

此外，我知道CSS3会丢弃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>

Answer 2

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

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

Answer 3

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

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

此外，重要的是要注意，如果属性是复选框/单选按钮，IE将不会添加任何内容。请务必添加标签，然后添加:after或:before。

-webkit-appearance相当于CSS3和IE

3 个答案: