如何修改HTML select框中选中选项的文字颜色？

你用::placeholder无效是因为select元素不支持这个伪元素，它仅适用于input、textarea这类输入型表单控件。你的默认提示文本（比如代码里的"Month"，你提到的"Day"应该是类似场景）本质是一个被设为selected且hidden的option，要修改它的显示颜色，可用以下方法：

方法一：基础CSS方案（兼容性好） #

通过设置select的默认颜色，再给下拉列表中的正常选项单独设置颜色，实现提示文本和选中选项的颜色区分：

/* 默认显示的提示文本颜色（对应hidden的selected option） */
.select-box {
  color: #999; /* 自定义提示文本颜色，比如灰色 */
}

/* 下拉列表中所有可见选项的颜色 */
.select-box option {
  color: #333; /* 正常选项的文本颜色 */
}

设置后，默认状态下select显示的提示文本是灰色，用户选择任意选项后，select的文本会自动切换为正常的深灰色。

方法二：结合:has伪类的精准控制（需现代浏览器支持） #

如果目标浏览器支持CSS :has伪类（Chrome 101+、Firefox 121+等），可以更精准地控制选中不同选项时的颜色：

/* 默认提示文本颜色 */
.select-box {
  color: #999;
}

/* 当选中的是可见选项时，切换select的文本颜色 */
.select-box:has(option:not([hidden]):checked) {
  color: #333;
}

/* 下拉选项统一颜色 */
.select-box option {
  color: #333;
}

注意事项 #

• 不要给hidden的option单独设置color，因为select的显示文本颜色继承自自身样式，而非选中option的样式（部分浏览器不支持直接给hidden option设置显示颜色）。
• 仅修改文本颜色的话，以上方案足够；若需自定义下拉框外观，可能需要用组件模拟select。

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