input文字颜色必须用css的color属性设置，它仅控制用户输入文字的颜色；占位符需用input::placeholder，选中文本色由::selection控制，且需注意浏览器兼容性与继承规则。
input文字颜色用color属性，不是font标签或bgcolor
HTML的input元素本身不提供原生颜色设置属性，<font color></font>和bgcolor早已被废弃，硬写进去浏览器可能渲染但会报DOM warning，Lighthouse检测直接扣分。真正生效的是CSS的color属性——它控制的是输入框内用户键入文字的颜色，不是占位符、边框或背景。
直接改input文字色：用color + 注意继承与覆盖优先级
给input设文字色最常用方式是写CSS规则：
-
input { color: #2c3e50; }—— 全局生效，但子元素（如input::placeholder）不会继承这个值 -
input[type="password"] { color: #e74c3c; }—— 按类型区分，避免密码明文时颜色太浅看不清 - 别依赖行内
style="color: red"：一旦写了，后续用类名想覆盖就得加!important，容易引发样式冲突 - 如果文字突然变灰/变白，先查父容器是否设置了
color且未被子元素显式重置——input会继承父级color，但仅限于未输入内容前的初始状态；用户开始打字后，实际显示色以自身color为准
选中文本时的颜色：必须用::selection伪元素
用户鼠标拖选input里已输入的文字时，高亮背景和文字色由::selection控制，不是color属性：
-
input::selection { background-color: #007bff; color: white; }—— 仅对WebKit/Blink内核（Chrome/Safari/Edge）有效 - Firefox需额外加
input::-moz-selection，否则选中色回退到系统默认 - 注意：这个伪元素不能用于
input::placeholder，也不能改变占位符本身的颜色 - 若发现选中失效，检查是否在父容器上写了
user-select: none，它会直接禁用文本选择
占位符文字颜色要单独处理
placeholder是伪元素，不响应input { color: ... }，必须用特定伪类：
-
input::placeholder { color: #999; opacity: 0.8; }—— 主流浏览器都支持 - 旧版Chrome需
input::-webkit-input-placeholder，Safari 15.4之前还要input::-webkit-input-placeholder加!important - 别用
color: transparent隐藏占位符：屏幕阅读器仍会读出，且部分辅助技术可能误判为不可用字段 - 如果占位符颜色和输入文字色一样深，用户可能误以为“已经填了”，建议占位符比正文浅20%以上
真正难搞的不是怎么写，而是什么时候该用currentColor、什么时候该用rgba()做透明度微调，以及暗色模式下如何不靠JS手动切换——这些得结合@media (prefers-color-scheme: dark)重定义color，而不是指望currentColor自动适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
