Selectbox dropdown styling

Question

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

Styling the dropdown area is not possible without getting nuts: http://stackoverflow.com/questions/16152144/change-combo-box-style — Krisztián Balla, Jan 16 '14 at 11:05

score 1 · Answer 1 · answered Jan 16 '14 at 11:06

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;
}

answered Jan 16 '14 at 11:06

Mr. Alien

147,524
33
287
271

I don't think you are getting it, maybe i don't explain it proberly though. I need to style the dropdown area, the fiddle you provided does not work :) :/ – simon Jan 16 '14 at 11:09
@SimonDuun So what I just did there in my fiddle? – Mr. Alien Jan 16 '14 at 11:09
1

As per your query, Mr. Alien's solution is perfect +1 – richa_pandey Jan 16 '14 at 11:16
@SimonDuun Just in case if you meant to change the dropped down box, than that's not possible with pure CSS only, also, if you think the dropped options are far from the main one, than get rid of the `height` property from `.styled-select select` – Mr. Alien Jan 16 '14 at 11:18

simon · Answer 2 · 2014-01-16T16:42:34.747

0

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?

edited Jan 16 '14 at 16:42

answered Jan 16 '14 at 14:10

simon

2,145
6
31
50

Selectbox dropdown styling

2 Answers2

Linked