如何解决input[type="text"]:focus的background-color属性被覆盖不生效问题？

嘿，我完全懂你这会儿的困惑——明明写了input[type="text"]:focus的背景色设置，结果就是不生效，还揪不出到底是什么在搞鬼对吧？咱们一步步来拆解问题，找到解决办法：

先搞清楚「谁在覆盖」：用浏览器开发者工具排查 #

这是最直接的方法，操作很简单：

• 打开页面，点击输入框让它处于:focus状态
• 按下F12打开开发者工具，切换到「Elements」面板，找到这个input元素
• 在右侧「Styles」标签里，找你写的.searching-form input[type="text"]:focus规则：
  • 如果你的background-color被划掉了，下面会显示哪个选择器或者哪种样式把它覆盖了（比如更具体的选择器、内联样式，甚至是其他CSS文件里的规则）
  • 要是压根找不到你的规则，那可能是SCSS编译出了问题，或者你的选择器写错了（比如类名拼错）

针对性解决覆盖问题 #

根据排查结果，咱们对应调整：

1. 优先级不够？提升选择器特异性
   你的选择器特异性不算最高，要是有其他更具体的规则（比如带ID的选择器，或者嵌套更深的选择器），就会被覆盖。可以试试：

   • 给input加个专属类名，比如<input type="text" class="search-input">，然后修改SCSS：

     .searching-form .search-input { 
       padding-left: 15px; 
       width: 100%; 
       height: 36px; 
       color: $white; 
       font-size: 14px; 
       background-color: $dark-text; 
       border: none; 
       border-radius: 12px; 
       box-sizing: border-box; 
       box-shadow: 0 3px 6px rgba(0, 0, 0, 1.6); 
     } 
     .searching-form .search-input:focus { 
       color: $white; 
       background-color: $dark-text; 
       outline: none; 
     }
     

   类选择器+父类的组合，特异性会比属性选择器高一些。

2. 临时验证：用!important快速测试
   要是暂时找不到覆盖的源头，可以先加!important验证是不是优先级问题（注意：这只是临时调试手段，尽量别长期用，不然会给后续样式维护埋坑）：

   .searching-form input[type="text"]:focus { 
     color: $white; 
     background-color: $dark-text !important; 
     outline: none; 
   }
   

   如果加了之后生效了，那肯定是优先级的问题，再回去找那个高优先级的规则就行。

3. 检查变量是否正确
   别忘了确认$dark-text变量的取值是不是你预期的颜色！有时候变量在其他地方被重新赋值了，或者拼写错了，也会导致样式看起来没生效。可以临时把变量换成具体颜色值（比如#2d2d2d）测试一下。

额外小提示：重置浏览器默认focus样式 #

虽然浏览器默认的:focus一般不会改背景色，但也不排除有些奇怪的默认样式或者全局重置样式搞事情。可以在全局样式里加一段重置：

input:focus {
  background-color: inherit;
  outline: none; // 可选，看你需求
}

这样能确保默认样式不会干扰你的自定义设置。

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