Change option colour in select menu

Question

This might be basic but I'm can not get this working. In my submit form I've got a select menu. I've disabled the first option and set its value to empty.

<select  name="types">
    <option value="" disabled selected>Please select<option>
    <option value="Fruit">Mangos</option>
    <option value="Veggies">Beans</option>
</select>

how can I make the text of the disabled option to be #f60? Basically I need it to look same as a placeholder text.

This might be helpful in your case. http://stackoverflow.com/questions/8635317/i-want-to-change-the-color-of-the-select-options-texts — Panda, Aug 12 '15 at 06:45

score 2 · Accepted Answer · edited Aug 12 '15 at 06:46

2

Try adding color using css for the first child of select list as below

<style>    
select option:first-child {
        color : #F60F60;
    }
</style>

hope it helps

edited Aug 12 '15 at 06:46

Pouya Ataei

1,959
2
19
30

answered Aug 12 '15 at 06:40

madhu

244
5
13

score 2 · Answer 2 · answered Aug 12 '15 at 06:41

Try like this: Demo

select option:disabled {
    color: #f60 !important;    
}

HTML:

<select  name="types">
    <option value="" selected disabled="disabled">Please select</option>
    <option value="Fruit">Mangos</option>
    <option value="Veggies">Beans</option>
</select>

score 0 · Answer 3 · answered Aug 12 '15 at 06:45

You need to put background-color on the option tag and not the select tag...

select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);

}

If you want to style each one of the option tags.. use the css attribute selector:

   select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="1"]{
    background: rgba(100,100,100,0.3);
}

select option[val="2"]{
    background: rgba(200,200,200,0.3);
}

...

Change option colour in select menu

3 Answers3