Clearing the background of a <select> element's pulldown button with CSS

Question

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.

However, here is the issue.

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.

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?

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

Answer 1

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

Read this bug report : 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;
}

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