【问题标题】：Change color of selected option in html select input在 html 选择输入中更改所选选项的颜色
【发布时间】：2014-10-16 05:46:42
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

Updated fiddle

jQuery

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

【讨论】：

我不认为 OP 指的是更改 background-color。
这很好用！谢谢！有时（使用 php）选择加载已选择的选项。在这种情况下，它不起作用，因为 jQuery 引用没有任何变化。如果已经通过 php 脚本选择了除第一个选项（值为“”）以外的其他选项，知道如何让它加载蓝色吗？ @BrianBennett
这样的？但这不起作用if( $("select").val() != "" ) { $(this).css('color','red') }
一个更简单的解决方案可能是将默认值设置为disabled，这样他们就无法切换回来......或者这不是一个选项？这是更新：jsfiddle.net/wtedm8q9/29@PaigeRoseFigueira
不知道为什么该代码不适合您。这是您的解决方案的另一个工作小提琴（检查加载的 ID）jsfiddle.net/wtedm8q9/31@PaigeRoseFigueira

【解决方案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) ，使用一般样式，并仅在选中的样式上更改颜色...

【讨论】：

【解决方案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。

【讨论】：