使用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 的颜色有默认限制，需使用带前缀的伪元素来控制。

完整示例：聚焦时文字变红

以下是一个完整的例子，展示输入框在聚焦时文字颜色变为红色：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

<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 就能轻松实现输入框聚焦时文字变色，不复杂但容易忽略细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！