使用CSS的:focus伪类配合color属性可实现输入框聚焦时文字变色；2. 示例中输入框默认文字为黑色，聚焦时变为红色，并通过transition实现平滑过渡；3. 需注意样式优先级和placeholder需单独设置，避免颜色变化失效。
当用户点击输入框使其获得焦点时，改变其中文字的颜色，可以通过CSS的 :focus 伪类配合 color 属性来实现。这个效果常用于提升表单的交互体验，让用户清楚当前正在操作哪个输入框。
使用 :focus 控制聚焦状态
:focus 是一个伪类，用于选中元素处于“聚焦”状态时的样式。对于输入框（如 input 或 textarea），当用户用鼠标点击或通过 Tab 键激活时，就会触发该状态。
示例代码：
input:focus {
color: blue;
}
这段代码表示：当输入框被聚焦时，内部文字颜色变为蓝色。
确保文字颜色能正常变化
有时设置 color 在 :focus 下无效，可能是因为原有样式使用了更高优先级的选择器，或者输入框内文字被其他样式覆盖（例如 placeholder 样式）。
立即学习“前端免费学习笔记（深入）”；
注意点：- 如果想同时改变输入内容和占位符（placeholder）颜色，需单独设置 placeholder 的样式。
- 某些浏览器对 placeholder 的颜色有默认限制，需使用带前缀的伪元素来控制。
完整示例：聚焦时文字变红
以下是一个完整的例子，展示输入框在聚焦时文字颜色变为红色：
<input type="text" value="点击我试试">
input {
color: black;
transition: color 0.3s ease;
}
<p>input:focus {
color: red;
outline: none; /<em> 可选：去除默认外边框 </em>/
}</p>
加入 transition 可使颜色变化更平滑，提升视觉体验。
基本上就这些。使用 :focus 和 color 就能轻松实现输入框聚焦时文字变色，不复杂但容易忽略细节。
