如何移除Firefox中点击按钮后出现的虚线轮廓？

我太懂你这种烦恼了——明明给好多元素都加了outline: 0 !important;，Firefox里点击按钮还是会出现那个讨厌的虚线轮廓！别慌，咱们来针对性解决它。

问题根源 #

这个虚线其实是Firefox默认的焦点环（focus ring），它是作用在按钮本身的，而你之前只给图标(.slide-arrow i)加了移除轮廓的样式，没覆盖到按钮的:focus状态，所以才会无效。

解决方案 #

给按钮的:focus状态和Firefox专属的内部焦点样式都做覆盖，直接把下面的CSS规则加到你的样式里：

/* 覆盖按钮的焦点状态 */
.slide-arrow:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Firefox专属：移除按钮内部的焦点边框 */
.slide-arrow::-moz-focus-inner {
  border: 0 !important;
}

把这两段代码加到你现有的CSS里，就能彻底干掉Firefox里的这个虚线轮廓了。

额外提醒（重要！） #

虽然移除焦点环能解决视觉问题，但可访问性不能忽略——键盘用户是靠焦点环来定位当前选中元素的。如果一定要移除默认轮廓，建议自定义一个焦点样式来替代，比如：

.slide-arrow:focus {
  outline: none;
  background-color: #A66666; /* 用不同的背景色提示焦点 */
}

这样既满足了视觉需求，又不会影响键盘用户的使用体验。

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