Style a Select box using CSS

Question

I have a Select box:

<select name="Topic" autofocus>
<option>Science</option>
<option>Java Programming</option>
<option>Advance Web Programming</option>
</select>

with the following CSS:

select{
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 2px;
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    padding: 4px;
}

This is my output:


The css seems like only affect outside of the select box, but not the inside(dropdown list), how to modify it so that inside will be modified also?

Answer 1

In some cases you can, but will be not crossbrowser for sure. This element is rendered by the OS, not HTML. It cannot be styled via CSS. There are replacement plug-ins that look like a SELECT, but are actually composed from regular HTML elements that CAN be styled.

From MSDN

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

So it will work for some Browsers and versions, but for Chrome will not. I can't find right now the specs.

JS Solution

Most of the plugins out there convert <select> elements to <ol> and <option> elements into to <li>, so that you can style it with CSS. You could write your own, but I'm sure there are good stuff out there.

Two options

• Chosen - 7k+ watchers on github
• Select2 - inspired by Chosen