html - 删除默认选择下拉菜单

Question

在应用您自己的下拉菜单时，删除选择默认下拉菜单的最佳方法是什么？目前我正在使用我的背景图片：

.select-custom {
  background-image: url ('/images/select-arrow.png')
}

有没有办法覆盖默认值，例如 FF/IE？

Answer 1

将元素包裹<select>在一个<div>元素中。目标是将元素设置为<select>比元素稍宽，以<div>使箭头不可见。然后，您可以使用CSSbackground:中元素的属性更改箭头。<div>

<div class="custom">
    <select>
        <option></option>
        <option></option>
    </select>
</div>

有关详细说明，请参阅本教程：

http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 2

我建议你看看Chosen jQuery 插件，它改变了选择标签的外观。您可以进一步对其进行自定义，以实现您所需要的。