答案 0 :(得分：2)
你可以通过CSS和一点JavaScript / jQuery实现你想要的。这个想法很简单：
将HTML5 data-属性（例如data-value）添加到具有当前值的select（默认情况下为第一个）。
<select name="selected" data-value="s">
<option value="s">None Selected</option>
<option value="s2">Selected</option>
<option value="s3">Another value</option>
</select>
使用颜色select设置option和#555555的样式。
select, option { color:#555555; }
如果select的{{1}}为“s”（第一个选项的值），则将其设为浅灰色：
data-value每次选择更改值时，都会更新select[data-value='s'] { color:#c7cacb; }
data-value通过这样做，您将获得所需的效果。以下是使用您的代码的示例：
$("select").on("change", function() {
$(this).attr("data-value", $(this).val());
}
$(document).ready(function(){
// wrap all selectors to add ::after in css
$('select:not([disabled])').wrap('<label class="dropdown">');
$('select[disabled]').wrap('<label class="dropdownDisabled">');
// controlling color of elements
$("select").on("change", function() {
$(this).attr("data-value", $(this).val());
});
})select {
width: 230px;
height: 46px;
background: #f1f5f8;
color:#c7cacb;
font-size: 16pt;
padding: 3px;
border: 2px solid #d7d6d5;
border-radius: 8px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.dropdownlabel {
display: block;
font-size: 16pt;
margin-bottom: 10px;
color: #d7d6d5;
}
label.dropdown::after {
content: "\e90e";
font-family: 'icomoon';
font-size: 8pt;
color: #555555;
display:inline-block;
box-sizing:border-box;
margin-left: -32px;
pointer-events:none; /* let the click pass trough */
}
select, option {
color:#555555;
}
select[data-value='s'] {
color:#c7cacb;
}
现在当<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selected" class="dropdownlabel">Dropdown label</label>
<select name="selected" data-value="s">
<option value="s">None Selected</option>
<option value="s2">Selected</option>
<option value="s3">Another value</option>
</select>打开或所选选项不是第一个时，颜色将为深灰色;如果所选的选项是第一个，则颜色将为浅灰色。