如何用CSS或jQuery根据选中状态设置表单select字段样式？

需要实现以下效果：

• <select> 初始显示默认选项 please select 时，文本颜色为灰色（#b8b8b8）
• 选中 Yes 或 No 选项后，文本颜色改为白色（#fff）

原HTML结构：

<form>
  <select>
    <option selected disabled>please select</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</form>

尝试过的方案均存在问题：

• 各类jQuery方案无效，toggleFields 会修改所有选项的文本样式而非<select>控件本身
• 最后尝试的方案中，选中Yes/No时文本变为红色，但初始的please select无法设置为蓝色
• 直接用CSS选中disabled option仅能修改下拉展开时的选项样式，初始关闭状态的文本颜色不生效

结合CSS类控制和jQuery事件监听可以完美解决这个问题，同时兼顾表单重置的场景：

完整实现代码 #

<form id="myform">
  <select id="selection" class="select-gray">
    <option value="none" selected disabled>please select</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
</form>

<style>
/* 初始灰色文本 */
.select-gray {
  color: #b8b8b8;
}
/* 选中后白色文本 */
.select-white {
  color: #fff;
}
/* 下拉时的默认选项样式 */
#selection option[disabled] {
  color: #b8b8b8;
}
/* 下拉时可选选项的样式，避免颜色混乱 */
#selection option:not([disabled]) {
  color: #fff;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// 表单重置时恢复初始样式
function myFunction() {
  document.getElementById("myform").reset();
  $("#selection").addClass("select-gray").removeClass("select-white");
}

$(document).ready(function() {
  $("#selection").change(function() {
    const val = $(this).val();
    if (val === "none") {
      $(this).addClass("select-gray").removeClass("select-white");
    } else {
      $(this).removeClass("select-gray").addClass("select-white");
    }
  });
});
</script>

方案说明 #

1. 用CSS类管理样式：通过类切换代替直接修改行内样式，更易维护和扩展
2. 覆盖下拉选项样式：单独设置disabled选项的颜色，保证下拉展开时默认选项也是灰色；同时设置可选选项为白色，避免下拉时颜色不一致
3. 监听change事件切换样式：根据选中的值动态切换对应的样式类
4. 处理表单重置：表单重置只会恢复选中状态，需要手动还原select的初始样式类，保证重置后回到灰色文本状态

这样既解决了初始状态文本颜色不生效的问题，也能在选中选项后正确切换颜色，同时保证下拉展开时的选项样式统一。

内容的提问来源于stack exchange，提问作者Meelperd