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

Question

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

例如，这是一些代码。

 <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"/>

我会等待好的答案

Answer 1

appearance: none会工作，但这不是一种跨浏览器的方式。

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

演示

编辑：

这是复选框的跨浏览器方法，

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

Answer 2

目前，这在除Opera外的所有浏览器中都是可能的（尽管在切换到“闪烁”时应该可以使用）。

对于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/