如何删除选择框/复选框的默认状态？

Question

我想知道，如何删除选择框的默认箭头和复选框中的渐变，我想在上面使用自定义图像。

例如，这里有一些代码。

 <select class="selectParent">
     <option value='1'>Title</option>
     <option value='2'>Description</option> 
     <option value='3'>Author</option>
 </select> 

我搜索了一些使用-webkit-外观删除默认状态的解决方案；和-moz-外观；但我不知道在 IE 中。是否有可能删除 IE 中的默认状态？

同样的逻辑，我想知道，如何删除复选框中的默认状态。

<input type="checkbox" name="category" id="category10"/>

我会期待好的答案 thx

Answer 1

appearance: none 可以，但this is not a cross-browser way to do it。

select, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

DEMO

编辑：

这里是checkbox的跨浏览器方法，

http://jsfiddle.net/kyLq4/1/

Answer 2

目前这在除 Opera 之外的所有浏览器中都是可能的（尽管当它切换到 Blink 时应该可以工作）。

对于 Firefox 和 WebKit/Blink，您需要使用 appearance: none;，它相当笨拙并且删除了所有样式：

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
}

如果您愿意，您也可以包含无前缀版本，尽管外观属性不再是任何标准。它是从CSS3 Basic UI 删除的。

对于 IE，您可以使用 -ms-check 伪元素专门设置复选标记的样式。如果您只想隐藏复选标记，可以执行以下操作：

input[type="checkbox"]::-ms-check {
    color: transparent;
}

如果你想隐藏整个元素，就像appearance: none; 所做的那样，你可以这样做：

input[type="checkbox"]::-ms-check {
    display: none;
}

要重新添加复选标记，您应该使用:checked 伪类：

input[type="checkbox"]:checked {
    background-color: green;
}

这是使用后一种方法的演示。我刚刚在选中时设置了背景颜色，但您可以轻松地使用图像：http://jsfiddle.net/HxqKu/3/