如何移除Firefox表单字段高亮或自定义其样式？

问题：Firefox表单字段聚焦时突然显示刺眼的亮蓝色实心高亮，希望恢复为原生简洁虚线样式，或完全移除、修改其颜色/尺寸。

问题表现 #

表单聚焦时呈现刺眼的亮蓝色实心高亮

期望效果 #

表单聚焦时显示简洁的虚线样式

你之前尝试的问题点 #

你在CSS代码中存在语法错误（比如border: none important!应为border: none !important），且部分规则覆盖不全，导致无效。

解决方案 #

所有代码需写入userContent.css文件中（网页内容样式用userContent.css，浏览器UI样式用userChrome.css），并确保Firefox已启用自定义CSS功能：在about:config中设置toolkit.legacyUserProfileCustomizations.stylesheets为true。

1. 恢复原生虚线聚焦样式

@-moz-document url-prefix("http://"), url-prefix("https://") {
  /* 覆盖所有可聚焦元素的高亮 */
  :focus-visible {
    outline: 1px dotted ButtonText !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
}

2. 完全移除聚焦高亮

@-moz-document url-prefix("http://"), url-prefix("https://") {
  :focus-visible,
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
  }
}

3. 自定义高亮的颜色和尺寸

@-moz-document url-prefix("http://"), url-prefix("https://") {
  :focus-visible {
    /* 自定义实心高亮：颜色、宽度 */
    outline: 2px solid #ccc !important;
    /* 若要虚线样式，替换为下面一行 */
    /* outline: 1px dashed #666 !important; */
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}

4. 配合about:config优化设置

在about:config中调整以下参数：

• browser.display.focus_ring_on_anything: 设置为false（仅对浏览器原生UI生效，网页内容样式需靠CSS）
• browser.display.focus_ring_width: 设置为1（原生虚线宽度）
• browser.display.always_show_rings_after_key_focus: 设置为true（确保键盘聚焦时显示样式）

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