清除的背景元素与CSS下拉按钮(Clearing the background of a <

所以我有一个<select>我需要定制元素。基本上我只是希望它看起来像文本，但是当用户点击它，在下拉选项出现。这将是首选，以显示小箭头指示多种选择，但我可以补充一点，作为一个像我自己。

然而，这里的问题。

通过CSS，我使用自定义此元素：

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

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

这将清除背景和消除边界，实际上几乎工作，但小箭头按钮，下拉仍显示，看起来像赢经典。

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

我只关心在这里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:

你见过：

如何从在Firefox中选择元素去掉箭头

它看起来就像你用有限的可能性，但也有一些想法和解决方案出现。一个可能只是以消除与这样的箭头：

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

然后，你可以自由地添加自己的。

文章来源: Clearing the background of a