Updated fiddle

Question

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

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

Answer 2

从第一个选项中删除属性value=""：

Updated Fiddle

<select  name="phone1" id="phone1">
      <option>-- Select Phone Type --</option>
      <option value="Mobile">Mobile</option>

然后将属性选择器添加到css规则：

.row1-3 select option[value]:checked, .row1-3home select option[value]:checked {
    color:#01afd2;
}

PS：我冒昧地改变你的选择器。而不是:not(:checked)，使用一般样式，并仅在已检查的样式上更改颜色...

Answer 3

请检查一下，您需要使用jQuery才能完全达到您的目标：jsFiddle。

<强> jQuery的：

jQuery('#phone1').change(function () {
    if (jQuery(this).children('option:first-child').is(':selected')) {
        jQuery("#phone1").css("color", "black");
        jQuery("#phone1 option:checked").css("color", "black");
        jQuery("#phone1 option:not(:checked)").css("color", "black");
    } else {
        jQuery("#phone1").css("color", "#01afd2");
        jQuery("#phone1 option:checked").css("color", "#01afd2");
        jQuery("#phone1 option:not(:checked)").css("color", "black");
    }
});

jQuery('#phone2').change(function () {
    if (jQuery(this).children('option:first-child').is(':selected')) {
        jQuery("#phone2").css("color", "black");
        jQuery("#phone2 option:checked").css("color", "black");
        jQuery("#phone2 option:not(:checked)").css("color", "black");
    } else {
        jQuery("#phone2").css("color", "#01afd2");
        jQuery("#phone2 option:checked").css("color", "#01afd2");
        jQuery("#phone2 option:not(:checked)").css("color", "black");
    }
});

使用此jQuery，如果选择了第一个选项，即-- Select Phone Type --，其颜色仍为black，但如果您选择任何其他选项，则其颜色将更改为#01afd2。< / p>

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

3 个答案:

Updated fiddle