清除< select>的背景元素的下拉按钮与CSS [英] Clearing the background of a <select> element's pulldown button with CSS

问题描述

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

So I have a <select> element that I need to customize. Essentially I just want it to look like text, but when the user clicks on it, the pulldown choices appear. It would be preferred to show the little arrows indicating the multiple choices, but I could add that as an image myself.

但是，这里是问题。

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

Via CSS, I customize this element using:

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

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

I have little arrows showing the two essential rules.

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

This clears the background and removes the border and actually almost works, however the little arrow pulldown button is still shown, and looks like Win Classic.

隐藏下拉按钮的背景和边框？

Is it possible to hide the background and border of the pulldown button?

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

I only care for working with Mozilla platforms here. Thanks!

推荐答案

通常您可以使用 -moz-appearance：none ，但是 select 元素..

Normally you could use -moz-appearance:none but there is a bug with the arrow of the select elements..

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

也许是一个伎俩，在你的选择之前包裹一个元素，然后使用：将元素放在其顶部。

Maybe a trick like wrapping an element around your select and then using :after to put an element on top of it..

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

这篇关于清除< select>的背景元素的下拉按钮与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！