Clearing the background of a <select> elemen

问题:

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!

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

回答2:

Have you seen:

How to remove the arrow from a select element in Firefox

It looks like you're limited with your possibilities but there are a few ideas and solutions there. One could be just to to eliminate the arrow with something like this:

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

Then you're free to add your own.