如何移除表单字段焦点？已尝试CSS仍存在绿色高亮框

看起来你已经尝试了基础的outline: none但没奏效，这大概率是因为那个绿色高亮框不是浏览器默认的outline，而是你使用的表单系统自带的自定义样式，比如box-shadow或者更高优先级的边框样式。下面给你几个可行的解决方案：

1. 先确认高亮的具体来源 #

打开浏览器的开发者工具（按F12），选中一个聚焦的表单字段，在「Styles」面板里查找:focus相关的样式规则，看看绿色高亮是由box-shadow、border-color还是其他属性控制的。这一步能帮你精准定位要覆盖的属性。

2. 用更高优先级的选择器覆盖样式 #

你的表单有.elq-form类，利用这个类来提高选择器优先级，确保你的样式能覆盖系统自带的样式。试试这段CSS：

/* 精准定位你的表单内的所有可聚焦控件 */
.elq-form input:focus,
.elq-form select:focus,
.elq-form textarea:focus {
  outline: none !important;
  /* 如果检查后发现是box-shadow导致的绿色框，加上这行 */
  box-shadow: none !important;
  /* 如果绿色是边框颜色，重置回你默认的边框色 */
  border-color: #ccc !important;
}

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

• 你之前的全局input:focus选择器优先级可能低于表单系统自带的.elq-form input:focus这类更具体的选择器；
• 绿色高亮可能是box-shadow而不是outline，所以只设置outline: none自然没用；
• 系统样式可能加了!important，所以你也需要用!important来强制覆盖（尽量少用，但这里是特殊场景）。

3. 额外注意：可访问性提示 #

虽然你要求去掉高亮框，但还是要提一句：聚焦状态的高亮是给键盘导航用户的重要提示，完全去掉可能影响可访问性。如果可以的话，建议换成更柔和的自定义聚焦样式，而不是完全移除。

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