更改html选择输入中所选选项的颜色

Question

我正在尝试更改“选择”菜单中 SELECTED 选项的文本颜色，但似乎无法使其正常工作。下面是我的代码。有任何想法吗？一旦选择了具有值的选项，我只想更改颜色......即除了第一个选项之外的任何内容。

http://jsfiddle.net/wtedm8q9/

html：

<div class="row1-3home">
  <select  name="phone1" id="phone1">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
    </select>

   <select  name="phone2" id="phone2">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
  </select>  


</div>  

CSS：

.row1-3 select, .row1-3home select {
background:#FFF;
font-size:12px;
font-family:'Open Sans', sans-serif;
width:94%;
margin-left:3%;
margin-right:3%;
height:40px;
line-height:40px;
border:none;
padding-left:10px;
border-radius:none;
margin-bottom:5px;
-moz-appearance: none;
}
.row1-3 select option, .row1-3home select option {
color:#01afd2;
}
.row1-3 select option:not(:checked), .row1-3home select option:not(:checked) {
color:#9fa7b4;
}

Answer 1

使用一点 jQuery，您可以在有人更改菜单项时更改颜色。

更新的小提琴

jQuery

$("select").change(function() {
    $(this).css('color','red')
})