如何更改所选选项中的字体颜色？

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.

PS 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/

Answer 1

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

Answer 2

fiddle

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

Read CSS [attribute=value] Selector

Answer 3

.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.