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

Question

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

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，您可以让它在有人更改菜单项时改变颜色。

Updated fiddle

jQuery

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