css输入框focus颜色如何调整

通过:focus伪类修改css输入框焦点颜色，可调整border或outline样式。1. 设置border颜色并移除默认outline；2. 自定义outline颜色以保留可访问性提示；3. 添加transition实现平滑过渡；4. 使用class针对特定输入框设置。需注意视觉效果与用户体验平衡，避免完全去除焦点轮廓。

调整CSS输入框获取焦点（focus）时的颜色，主要是通过修改其 outline 或 border 样式来实现。默认情况下，浏览器会在输入框获得焦点时显示一个蓝色或高亮的外边框，我们可以通过自定义CSS来改变这个效果。

1. 修改焦点边框颜色

使用 :focus 伪类选择器，可以针对输入框聚焦状态设置边框颜色：

 input:focus {   border: 2px solid #007bff; /* 蓝色边框 */   outline: none; /* 移除默认轮廓线 */ } 

说明：如果不加 outline: none，浏览器默认的焦点轮廓可能会和你设置的边框同时出现，影响美观。

2. 使用外轮廓（outline）自定义颜色

如果你希望保留轮廓效果（更符合可访问性），可以直接修改 outline 颜色：

立即学习“前端免费学习笔记（深入）”；

 input:focus {   outline: 2px solid #ff5722; /* 橙红色轮廓 */   outline-offset: 1px; /* 控制轮廓与边框的距离 */   border: 1px solid #ccc; } 

这种做法在保持视觉提示的同时提升设计感，且对键盘导航用户更友好。

3. 添加平滑过渡效果

让颜色变化更自然，可以加上过渡动画：

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

107

查看详情

 input {   border: 1px solid #ddd;   transition: all 0.3s ease; } <p>input:focus { border-color: #4caf50; outline: 2px solid rgba(76, 175, 80, 0.3); }</p>

transition 让边框颜色渐变，用户体验更柔和。

4. 针对不同输入框单独设置

如果只想修改特定输入框，可以添加 class 来区分：

 .input-primary:focus {   border-color: #0056b3;   outline: none; } 

html中使用：
<input class="tuc-1a44ec70-edd74c-0 input-primary tuc-1a44ec70-edd74c-0" type="text">

基本上就这些。关键是结合 :focus 和 border 或 outline 属性灵活控制颜色与样式，注意可访问性，避免完全移除焦点提示。

以上就是