How to change the font color in a selected option?

Question

I have the following HTML code:

<div class="register_account">
    <form>
        <select>
            <option value="null">Select a Country</option>
            <option value="AX">Åland Islands</option>
            <option value="AF">Afghanistan</option>
            <option value="AL">Albania</option>
            <option value="DZ">Algeria</option>
        </select>
    </form>
</div>

and CSS code:

.register_account
{ 
    background: #0023C4;
    width:62%;
    padding:1.5%;
}

.register_account form select
{ 
    width:100%;
    font-size:0.8em;
    color:#000;
    padding:8px;
    margin:5px 0;
    background: none;
    border: 1px solid #fff !important;
}

Now I want to change the text color of "Select a Country" and of the "selected" option in the form.

P.S. The example is here: http://jsfiddle.net/V7C6w/ .

Edit:

A possible solution to remedy the problem might be:

.register_account
{ 
    background: #0023C4;
    width:62%;
    padding:1.5%;
}

.register_account form select
{ 
    width:100%;
    font-size:0.8em;
    color:#fff;
    padding:8px;
    margin:5px 0;
    background: #0023C4;
    border: 1px solid #fff !important;
}

Prove yourself: http://jsfiddle.net/V7C6w/9/

possible duplicate of [Change color of option selected - jQuery](http://stackoverflow.com/questions/21159032/change-color-of-option-selected-jquery) — Mr. Alien, Jan 25 '14 at 12:56
possible duplicate of [css :selected pseudo class similar to :checked, but for for — Hashem Qolami, Jan 25 '14 at 13:04

Kirk · Accepted Answer · 2014-01-25T13:47:25.130

4

This small line will solve the problem and give what you need i guess

AFAIK you want to show selected item on the list with different color. here i used green for all item and white for default selection, try this one.

and it doesn't require any java-scripts, you can achieve this with simple CSS

.register_account form option:not(:checked) { color: green; }

Edited

//This line allows you to change the selected menu item color individually 
.register_account form option:checked { color: #0AD; }

edited Jan 25 '14 at 13:47

answered Jan 25 '14 at 13:21

Kirk

4,957
2
32
59

Thanks. Is this what I wanted to do. But how can I change the color of the selected option? If I select Albania, for example, after in the menu it appears white. How can I change it? – AntonyDV Jan 25 '14 at 13:28
In the question, you mentioned " I want to change the text color of "Select a Country" and of the "selected" option in the form." that's why i gave this answer? – Kirk Jan 25 '14 at 13:36
if you select white it will show "select a country" and selected item same color? – Kirk Jan 25 '14 at 13:36
I updated the answer, have a look, i guess finally this is what you want – Kirk Jan 25 '14 at 13:40
Thanks. This is exactly what I wanted. In fact I have written so in the question because I only find answers that led to the following type of code: .register_account option [value = null], which is not completely solved my needs xD. Thanks again for your response. – AntonyDV Jan 25 '14 at 13:55

score 1 · Answer 2 · answered Jan 25 '14 at 12:56

1

fiddle

.register_account option[value=null]
{
    color:yellow;
}

Read CSS [attribute=value] Selector

answered Jan 25 '14 at 12:56

Simone Nigro

4,717
2
37
72

The code I tried it, but the color "yellow" is not displayed. – AntonyDV Jan 25 '14 at 13:03
http://jsfiddle.net/V7C6w/5/ open select... "Select a country" is yellow (i use firefox 24) – Simone Nigro Jan 25 '14 at 13:21

score 0 · Answer 3 · answered Jan 25 '14 at 13:11

.register_account
  { background: #0023C4;
    width:62%;
    padding:1.5%;
   }

.register_account:hover form
    { width:100%;
      font-size:0.8em;
      color:#000;
      padding:8px;
      margin:5px 0;
      background: none;
      border: 1px solid #fff !important;
     }

That should work properly, use :hover, it's a lot easier.

How to change the font color in a selected option?

3 Answers3