html input 文字颜色无效是因系统样式覆盖或 appearance 设置不当；需确保未用 appearance: none 且显式设置 color 和 caret-color，并通过开发者工具检查被覆盖的规则。
HTML input 元素的 color 样式为什么无效
直接给 <input type="text"> 设置 color CSS 属性，通常看不到文字变色效果——这不是你写错了，是浏览器默认行为在“拦截”。input 的文字颜色受 color 控制，但前提是它没被系统级样式（比如 Windows 的高对比度模式、macOS 的原生控件渲染）覆盖，且未启用 appearance: auto 以外的值。
常见错误现象：color: red; 写了但输入框文字还是灰色或黑色；用开发者工具检查发现 computed style 里 color 被标记为 “inactive” 或被 user agent stylesheet 覆盖。
- 必须确保没有设置
appearance: none后又漏掉color声明（这时会回退到系统默认） - 某些浏览器（如旧版 Safari）对
input[type="number"]的color支持不一致 - 如果用了
input::-webkit-input-placeholder，它的color是独立控制的，不影响实际输入文字
VS Code 中改颜色 ≠ 运行时生效，别混淆编辑器主题和网页样式
你在 VS Code 里看到 HTML 文件中 <input> 标签高亮成某种颜色，那是编辑器语法着色（syntax highlighting），跟网页最终显示毫无关系。想改网页里输入框字段的颜色，必须写 CSS 并让浏览器加载执行。
使用场景：你刚新建一个 index.html，写了 <input type="text" value="hello">，想让它文字变蓝色，但只改了 VS Code 主题设置，页面刷新后毫无变化。
- VS Code 的设置（如
editor.tokenColorCustomizations）只影响代码显示，不影响运行结果 - 真正起作用的是内联
style、<style></style>块或外部 CSS 文件中的规则 - 快捷验证方式：在 HTML 文件里加一行
<style> input { color: #007acc; } </style>，保存后刷新浏览器
最简可靠的改色写法（含兼容性提醒）
不用框架、不依赖 JS，纯 CSS 就能稳定控制文字颜色。关键不是“怎么写”，而是“写在哪”和“有没有被覆盖”。
示例（直接可用）：
<input type="text" value="试试看" style="color: #d32f2f;">
但如果要批量控制，推荐写在 <style></style> 里：
<style>
input[type="text"],
input[type="email"],
input[type="password"] {
color: #1976d2;
/* 必须显式重置 caret 颜色，否则光标可能还是黑色 */
caret-color: #1976d2;
}
</style>-
caret-color很容易被忽略——它控制光标颜色，不设的话，即使文字变蓝，光标仍是默认黑/灰 - IE 不支持
caret-color，但 IE 已淘汰，无需降级处理 - 如果用了 CSS 重置库（如 normalize.css），检查是否重置了
input的color，可能需要提高选择器优先级（比如加!important，仅调试时用）
遇到改色失败，先查这三处
90% 的“颜色不生效”问题，卡在这三个地方，比翻文档更快定位。
- 打开浏览器开发者工具（F12），选中
input元素，在 Styles 面板里搜索color，看哪条规则被划掉（strikethrough）——被覆盖就说明优先级不够或被user agent锁死 - 检查是否设置了
input[disabled]，禁用状态下的color是独立控制的，需单独写input:disabled { color: #999; } - 确认没有 JS 动态给元素加了
style.color内联样式（比如某库初始化时强制设为 black），它会覆盖 CSS 规则
复杂点在于：颜色表现还依赖系统主题、浏览器版本、甚至字体渲染引擎。真要 100% 确保，就得用 appearance: none 彻底接管样式，但代价是失去原生交互细节（比如 iOS 的自动大写、Android 的软键盘适配）。多数情况，老老实实设 color + caret-color 就够了。
