移除表单元素默认焦点蓝色轮廓并替换为指定颜色的实现问题

嘿，我太懂这种挫败感了——明明试了一堆方案，结果浏览器自带的蓝色焦点轮廓还是顽固地冒出来，和页面配色完全不搭😤。咱们来一步步搞定它：

为什么你之前的代码没生效？ #

你尝试的代码覆盖了focus、active甚至默认状态，但忽略了现代浏览器（Chrome、Firefox）现在针对键盘导航场景新增的:focus-visible伪类。浏览器为了保障可访问性，会优先用这个伪类来渲染焦点样式，单纯的:focus已经压不住它了。另外，如果你的表单元素被更具体的选择器（比如框架自带的样式）覆盖，!important的优先级也可能不够。

有效的解决方案 #

方案1：精准覆盖特定表单元素（推荐） #

给你的联系框加一个专属类（比如.contact-form），然后针对里面的表单元素同时覆盖:focus和:focus-visible，确保优先级拉满：

/* 针对联系框内的所有表单交互元素 */
.contact-form input:focus,
.contact-form button:focus,
.contact-form textarea:focus,
.contact-form input:focus-visible,
.contact-form button:focus-visible,
.contact-form textarea:focus-visible {
  outline: none !important;
  /* 替换成你想要的边框样式 */
  border: 1px solid #17a2b8 !important;
  /* 可选：添加自定义焦点阴影，兼顾可访问性 */
  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.3) !important;
}

方案2：全局重置焦点样式（谨慎使用） #

如果你想一次性去掉所有元素的默认焦点轮廓，可以用全局选择器，但记得也要处理:focus-visible：

*:focus, *:focus-visible {
  outline: none !important;
  /* 可选：统一自定义焦点样式 */
  border-color: #17a2b8 !important;
}

重要提醒：别丢了可访问性 #

虽然默认蓝色轮廓很丑，但它是键盘用户导航页面的关键标识。完全移除焦点样式会让这部分用户无法感知当前选中的元素，所以强烈建议你自定义一个可见的焦点样式（比如上面的box-shadow），既解决配色冲突，又不破坏网页的可访问性。

内容的提问来源于stack exchange，提问作者nCardot