用 ::placeholder 伪元素可修改表单控件 placeholder 文字颜色，需配合具体选择器如 input::placeholder；现代浏览器已基本淘汰前缀写法；注意 color 属性不作用于 placeholder，须避免被继承色或高权重规则覆盖；textarea 支持 ::placeholder，select 则需通过 option[value=""] 控制；暗色模式下须用 @media (prefers-color-scheme: dark) 显式重设并确保对比度 ≥ 4.5:1。
HTML表单控件的 placeholder 文字颜色怎么改
用 ::placeholder 伪元素设置，不是 placeholder 属性本身，也不是 color 直接写在 input 上——那样只改输入内容颜色，不影响提示文字。
-
::placeholder是标准伪元素，支持 Chrome、Firefox、Safari（15.4+）、Edge，IE 完全不支持 - 必须搭配具体选择器使用，比如
input::placeholder或更精确的input[type="email"]::placeholder - 不同浏览器前缀已基本淘汰：旧写法如
::-webkit-input-placeholder在现代项目里可删，除非要兼容 Safari 14 或更老版本 - 颜色值写法和普通
color一致，但注意透明度：用rgba(0,0,0,0.4)比#999更符合 WCAG 对低对比度提示文本的建议
为什么写了 color 却没变 placeholder 颜色
常见失效不是语法错，而是作用对象错了——input { color: red } 只影响用户输进去的字，对 placeholder 无效；而 ::placeholder 又容易被父级继承色或更高权重规则压制。
- 检查开发者工具的 Computed 面板，确认生效的是
input::placeholder的color，不是input自身的 - 如果 placeholder 颜色发灰但代码写的是
#000，大概率是浏览器默认加了透明度（Chrome 默认约rgba(0,0,0,0.42)），需显式覆盖 - 某些 CSS 框架（如 Bootstrap）会重置
::placeholder，此时你的规则可能被它的!important锁死，得提高选择器权重，例如input.form-control::placeholder
textarea 和 select 的 placeholder 颜色能统一处理吗
不能靠一个规则通吃。textarea 支持 ::placeholder，但 select 根本没有原生 placeholder 机制——所谓“请选择”是靠第一个 <option></option> 的文本模拟的，它只是普通文字，得用其他方式控制颜色。
-
textarea::placeholder写法和input完全一致，可合并写：input::placeholder, textarea::placeholder { color: #666; } -
select的“占位提示”本质是<option value="">请选择</option>，要让它变灰，只能给这个特定option加类或用属性选择器：select option[value=""] { color: #999; } - 注意：该
option的颜色在用户选中后不会自动恢复，需 JS 配合监听change事件重置样式
暗色模式下 placeholder 颜色要手动适配吗
要。::placeholder 不响应 prefers-color-scheme 自动切换，必须显式用媒体查询重写。
- 基础写法：
@media (prefers-color-scheme: dark) { input::placeholder { color: #aaa; } } - 别依赖
currentColor：它取的是元素自身的color值，而input在暗色模式下未必设了深色文字，容易导致 placeholder 和背景同色不可见 - 真正要盯住的，是暗色背景下 placeholder 的对比度是否 ≥ 4.5:1——用浏览器 DevTools 的 Accessibility 面板直接测，比凭感觉调色可靠得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
