输入框:focus样式未生效，反而应用无关边框样式的技术问题

问题分析 #

你遇到的:focus状态下2px黑色边框，大概率是浏览器默认的outline轮廓样式，而非自定义border被覆盖；也可能是页面中存在优先级更高的CSS选择器，冲掉了你写的样式。

解决方案 #

1. 清除默认outline并确保样式优先级
   先给基础.in类添加outline: none清除浏览器默认聚焦轮廓，同时把:focus样式放在基础样式之后（无需!important，靠顺序保证优先级）：

   .in {
     display: block;
     margin-top: 20px;
     font-family: roboto;
     width:178px;
     border-style: solid;
     border-width: 1px;
     border-color: rgba(254,196,58,255);
     height: 20px;
     font-size: 15px;
     border-radius: 10px;
     padding-left: 6px;
     /* 清除浏览器默认聚焦轮廓 */
     outline: none;
   }
   
   .in:focus, .in:hover {
     border-color: #002f86;
     border-width: 1px;
   }
   

2. 提升选择器优先级（若仍被覆盖）
   如果页面中有其他高优先级样式（比如ID选择器、嵌套选择器），可以通过更具体的选择器强化优先级，比如结合标签名：

   input.in:focus, input.in:hover {
     border-color: #002f86;
     border-width: 1px;
     outline: none;
   }
   

排查技巧 #

打开浏览器开发者工具（F12），选中输入框后切换到:focus状态，查看样式面板中哪些规则被划掉，找到生效样式的来源，针对性调整优先级或覆盖规则。

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