css输入框聚焦时文字颜色变化如何实现_使用:focus和color控制

新闻中心 NEWS CENTER

2025-12-02

浏览次数：次

使用CSS的:focus伪类配合color属性可实现输入框聚焦时文字变色；2. 示例中输入框默认文字为黑色，聚焦时变为红色，并通过transition实现平滑过渡；3. 需注意样式优先级和placeholder需单独设置，避免颜色变化失效。

当用户点击输入框使其获得焦点时，改变其中文字的颜色，可以通过CSS的 :focus 伪类配合 color 属性来实现。这个效果常用于提升表单的交互体验，让用户清楚当前正在操作哪个输入框。

:focus 是一个伪类，用于选中元素处于“聚焦”状态时的样式。对于输入框（如 input 或 textarea），当用户用鼠标点击或通过 Tab 键激活时，就会触发该状态。

示例代码：

input:focus {
  color: blue;
}

这段代码表示：当输入框被聚焦时，内部文字颜色变为蓝色。

有时设置 color 在 :focus 下无效，可能是因为原有样式使用了更高优先级的选择器，或者输入框内文字被其他样式覆盖（例如 placeholder 样式）。

Canva AI

Canva平台AI图片生成工具

1374 查看详情 Canva AI

注意点：

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

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

以上就是css输入框聚焦时文字颜色变化如何实现_使用:focus和color控制的详细内容，更多请关注其它相关文章！