使用CSS </select>清除<select>元素的下拉按钮的背景

Question

所以我有一个<select>元素，我需要自定义。基本上我只是希望它看起来像文本，但当用户点击它时，会出现下拉选项。最好显示指示多个选项的小箭头，但我可以自己添加它作为图像。

然而，问题在这里。

通过CSS，我使用以下方法自定义此元素：

#FromPopup {
            background: none; <--
            border: none;  <-----
            margin-left: 8px;
            position: relative;
            cursor: pointer;
            height: 5px;
            margin-top: -10px;
}

我有小箭头显示两个基本规则。

这会清除背景并移除边框，实际上几乎可以正常工作，但仍会显示小箭头下拉按钮，看起来像Win Classic。

是否可以隐藏下拉按钮的背景和边框？

我只关心在这里使用Mozilla平台。谢谢！

Answer 1

通常您可以使用-moz-appearance:none，但select元素的箭头存在错误..

阅读此错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

---

也许就像在select周围包裹一个元素，然后使用:after将一个元素放在它上面一样。

<div class="select-container">
    <select>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
    </select>
</div>

.select-container {
    display:inline-block;
    position:relative
}
.select-container:after {
    content:'';
    position:absolute;
    right:0;
    top:0;
    width:17px;
    height:100%;
    z-index:10;
    background-color:white;
}

http://jsfiddle.net/gaby/K8MJB/1/

演示

Answer 2

你见过：

How to remove the arrow from a select element in Firefox

看起来你的可能性有限，但那里有一些想法和解决方案。人们可能只是想用这样的东西消除箭头：

select {
   overflow:hidden;
   width: 120%;
}

然后您可以自由添加。