Styling Select Drop down box

Question

I have a HTML Select drop down box, which I have styled, the problem I am having is that I can not seem to style the background color of the options. Below is a link to a demo as you can see the drop down options has a white background, which i am trying to change.

http://cssdeck.com/labs/lnroxrua

Here is my HTML Code:

<div class="select-div">
    <select name="pagination">

      <option value="10" selected="selected">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
    </select>
    </div>

CSS Styling

  select{
    background:transparent;
    width: 170px;
    padding: 2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:600;
    color:#fff;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 22px;
    -webkit-appearance: none;

    }

    .select-div{
width: 170px;
height: 22px;
overflow: hidden;
background: url(arrowhead.png) no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 4px 4px 4px 4px;
 -moz-border-radius: 4px 4px 4px 4px;
      border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
      -moz-box-shadow:    0px 8px 3px -9px #000000;
      -webkit-box-shadow: 0px 8px 3px -9px #000000;
      box-shadow:         0px 8px 3px -9px #000000;
   }

Thanks

See also [this question](http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript). — Jeroen, Jul 07 '13 at 21:33
@IwoKucharski he said: "**you can see the drop down options has a white background, which i am trying to change.**". The `background` property from an `option` element, and even the `select` element is able to be modified. — leoMestizo, Jul 07 '13 at 21:42
Duplicate question; re: https://stackoverflow.com/questions/16409386/looking-for-html5-select-element-css3-styling-solution-no-image-files-cross — Alexander Bell, Sep 23 '17 at 02:44

score 3 · Accepted Answer · answered Jul 07 '13 at 21:32

3

Here's a DEMO.

Just add this CSS rule:

select > option {
   background: color;
}

For example:

select > option {
   background: pink; /* Or an hexadecimal value */
}

Cheers, Leo!

answered Jul 07 '13 at 21:32

leoMestizo

1,469
9
15

score 1 · Answer 2 · edited May 23 '17 at 12:26

1

Unfortunately, webkit browsers do not support styling of tags yet.

check: How to style a select tag's option element?

edited May 23 '17 at 12:26

Community

1
1

answered Feb 03 '14 at 13:13

mr.T

351
1
4
12

Styling Select Drop down box

2 Answers2

Linked