Selectbox dropdown styling [duplicate]

问题:

This question already has an answer here:

• How to style a <select> dropdown with only CSS? 24 answers

I am working on a project where i need to style a selectbox. I can easy style the selectbox to match the psd, but when it comes to the dropdown area, its driving me nuts.

How is that possible? I have tryed with adding a overlay to the dropdown area with som css stuff, but i can't get it to work well.

The code for selectbox:

#sidebar select{
        background: transparent;
        width:148px;
        height:31px;
        border:0;
        border-radius:3px;
        line-height:1;
        -webkit-appearance: none;
        outline:none;
        color:silver;
        padding: 0px 0px 0px 10px;
        font-style: italic;
        cursor: pointer;
    }

    .styled-select{
        width: 150px;
        height: 30px;
        overflow: hidden;
        background: url('../images/icons/selectbox.png') no-repeat right; 
        border:0;
    }

<div class="styled-select">
   <select class="selectbox">
   <option value="">Hollaws</option>
   <option value="">Hollaws</option>
   <option value="">Hollaws</option>
   </select>
</div>

A small fiddle for example is provided here

回答1:

The trick is to use background-color: transparent; and border: 0; for select element, and also make sure your select element is larger than the container element.

Demo

Demo 2 (Little better looking demo)

.styled-select{
    width: 150px;
    height: 30px;
    overflow: hidden;
    background: url('http://www.simonsweb.dk/selectbox.png') no-repeat right; 
    border:0;
}

.styled-select select {
    width: 180px;
    background: transparent;
    border: 0;
    height: 30px;
    margin-top: 5px;
}

回答2:

Thank you for all your cool suggestions. I actually ended up using a FansySelectBox plugin, that works cross browser.

http://code.octopuscreative.com/fancyselect/

Edit: I don't know in this case if it is acceptable to answer my own question in this case or?