Question

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

例如，这是一些代码。

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

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

作为一个相同的逻辑，我想知道，如何删除复选框中的默认状态。

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

我会在寻找好的答案。

Answer 1

目前除了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/

Answer 2

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

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

DEMO

编辑：

以下是复选框的跨浏览器方法

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

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

2 个答案:

编辑：