1

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

例如，这里有一些代码。

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

我会期待好的答案 thx

4

2 回答 2

6

appearance: none可以，但这不是跨浏览器的方式。

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

演示

编辑：

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

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

于 2013-05-03T01:33:54.093 回答
5

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

于 2013-05-03T05:11:44.930 回答