CODEWITHSUNDEEP
csshtml
Becky
Becky

Reputation: 5585

Change option colour in select menu

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.

Upvotes: 2

Views: 734

Answers (3)

madhu
madhu

Reputation: 242

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

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

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

...

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

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>

Upvotes: 2

Related Questions