使用:focus伪类可自定义输入框聚焦样式，通常先去除outline再设置border-color和box-shadow，如input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0,123,255,0.5); }，并可通过transition提升交互体验，适用于input、textarea等元素。
当用户点击输入框时，浏览器默认会给它添加一个聚焦（focus）状态的外框。我们可以通过 CSS 的 :focus 伪类来自定义这个状态下的样式，比如改变边框颜色、背景色或阴影效果。
最常见的方式是修改输入框在获得焦点时的边框颜色。你可以通过设置 border 或 outline 属性来实现。
示例代码：
input:focus {<br> outline: 2px solid blue;<br> border-color: blue;<br>}注意：大多数浏览器默认使用 outline 显示聚焦样式。如果你想完全控制样式，可以先将其移除再自定义。
立即学习“前端免费学习笔记（深入）”；
为了更美观的设计，通常会先去掉默认的 outline，然后用 border、box-shadow 或两者结合来表现聚焦状态。
推荐写法：
input {<br> border: 1px solid #ccc;<br> padding: 8px;<br> border-radius: 4px;<br> transition: all 0.3s ease;<br>}<br><br>input:focus {<br> outline: none; /* 去除默认轮廓 */<br> border-color: #007bff;<br> box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);<br>}这里加入了 transition 让颜色变化更平滑，提升用户体验。
上述样式不仅适用于 <input>，也可以扩展到 <textarea> 和带有 contenteditable 的元素。
input:focus,<br>textarea:focus {<br> outline: none;<br> border-color: #28a745;<br> box-shadow: 0 0 6px rgba(40, 167, 69, 0.3);<br>}基本上就这些。通过 focus 状态的样式调整，可以让表单交互更清晰直观，同时保持界面美观。关键是合理使用 outline、border 和 box-shadow，并注意可访问性——确保聚焦状态依然明显可见。
以上就是如何通过css实现输入框focus颜色变化的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
929
收藏
