如何使用CSS设置input聚焦时的边框颜色（解决跨浏览器兼容问题）

:focus伪类本身完全支持和border-color属性配合使用，你遇到的样式异常和伪类生效逻辑无关，根源是浏览器默认给聚焦表单控件添加的outline（外轮廓）默认样式：

• 浏览器的outline样式绘制在元素边框的外侧，不占据文档流空间，不同内核浏览器的默认聚焦outline规则不同
• Chrome默认给聚焦input设置蓝色outline，轮廓范围刚好覆盖住边框区域，导致你设置的红色border被完全遮挡，视觉上只显示蓝色
• Firefox的默认outline和边框位置存在部分重叠，因此会出现红色边框叠蓝色轮廓的混合效果

只需要在聚焦样式中清除浏览器默认的outline，再自定义你需要的边框/轮廓样式即可，参考代码：

input:focus {
  /* 清除浏览器默认聚焦轮廓 */
  outline: none;
  /* 自定义聚焦边框颜色 */
  border-color: red;

  /* 可访问性优化建议：不要让聚焦状态无明显提示，可自定义柔和的外轮廓替代默认样式
  outline: 2px solid rgba(255, 0, 0, 0.2);
  outline-offset: 2px;
  */
}

把上述样式替换你原来的input:focus规则，就能实现输入框聚焦时显示纯红色边框的效果。

注意：不建议只清除outline不设置任何替代的聚焦提示样式，否则会影响键盘用户的导航操作，损害页面可访问性。

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