css 想让表单输入框聚焦时高亮怎么办_focus 伪类与 border-color

:focus 必须配合 outline: none 才能显色边框，否则默认 outline 会遮挡；应改用 box-shadow 实现可访问的焦点反馈，并结合 :focus-visible 渐进增强，同时确保 border-style 为 solid 以支持 transition。

input:focus 伪类必须配合 outline: none 才能干净高亮

直接写 input:focus { border-color: #007bff; } 往往没效果，因为浏览器默认的 outline 会盖住边框变化，尤其在 Chrome 和 Firefox 中。不移除 outline，你会看到一个难看的双轮廓（蓝色边框 + 黄色/黑色外发光）。outline 是可访问性必需的，但可以安全替换成更可控的 box-shadow。

• 必须加 outline: none;，否则 border-color 变化被遮挡
• 用 box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); 替代 outline，既保留视觉反馈又不干扰 border
• 别只设 border-color，要确保 border-style 和 border-width 已定义（比如 border: 1px solid #ced4da;），否则颜色变化无效

聚焦高亮要兼顾可访问性，不能只靠 :focus

仅靠 :focus 无法覆盖键盘用户（Tab 进入）和屏幕阅读器用户的全部场景。部分用户会关闭 outline 但依赖焦点样式导航，所以需要补充 :focus-visible 做渐进增强。

• :focus-visible 只在真实键盘聚焦时触发，鼠标点击后不会激活，体验更自然
• 推荐组合写法：

  input:focus {
    outline: none;
    border-color: #007bff;
  }
  input:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);
  }

• 注意 Safari 对 :focus-visible 支持较晚（v15.4+），旧版本会回落到纯 :focus

border-color 动画不生效？因为 border-style 不是 solid 或 dashed

想给 border-color 加 transition 却发现没动画？大概率是 border-style 没设对。CSS transition 只对可计算的数值属性生效，而 border-style 是关键字枚举值（如 none, solid），无法插值。

Pixie.haus

AI像素图像生成平台

下载

• 确保初始 border 包含 solid：例如 border: 1px solid #ced4da;
• 过渡写法必须明确： transition: border-color 0.15s ease-in-out;（不要写成 transition: all）
• 如果用了 border: none 初始状态，再切到 solid 会触发重排，且无颜色过渡——这是常见坑

移动端 iOS Safari 的 focus 行为很特殊

iOS Safari 默认只有在 获得焦点且软键盘弹出时才触发 :focus，但很多表单字段（比如 type="search" 或带 readonly 的输入框）可能根本不会弹键盘，导致 :focus 完全不触发。

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

• 加 inputmode="text" 或移除 readonly 可提升触发概率
• 必要时监听 focusin 事件，动态加 class：

  input.addEventListener('focusin', () => {
    input.classList.add('focused');
  });

• CSS 中用 .focused 替代 :focus，绕过 iOS 的限制