CSS问题：如何移除按钮点击后出现的奇怪虚线？

嘿，我太懂这种被莫名其妙的虚线缠上的烦躁了！你碰到的应该是浏览器默认的焦点轮廓线——这是浏览器为了可访问性给获取焦点的元素加的默认样式，但确实有时候和我们的自定义设计冲突。

先给你几个针对性的修复方案，结合你的现有CSS来调整：

1. 直接重置焦点状态的outline #

浏览器的虚线就是outline属性搞的鬼，我们可以在焦点状态下强制移除它，同时建议你加个自定义的焦点样式（兼顾可访问性）：

/* 给你的input加上焦点状态的样式 */
input.filterIcon:focus {
  outline: none !important;
  /* 可选：用box-shadow自定义焦点样式，比默认虚线好看，还不影响键盘用户 */
  box-shadow: 0 0 0 2px #64b5f6;
}

这里加!important是为了确保覆盖浏览器的默认样式优先级——毕竟你已经用了不少!important在基础样式里，这个得跟上。

2. 修复火狐的特殊内边框 #

火狐会给按钮/输入框额外加个::-moz-focus-inner的伪元素，有时候也会表现成类似虚线的效果，一起干掉它：

input.filterIcon::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

3. 整合到你的现有CSS里 #

把上面的代码补进你已有的样式里，最终大概是这样：

input.filterIcon {
  width: 32px !important;
  height: 32px !important;
  background: url(../images/filter-icn.png) no-repeat center right !important;
  padding: 0px !important;
  cursor: pointer;
  float: right;
  vertical-align: middle;
  margin: 0 0 0 10px !important;
  font-size: 12px;
  letter-spacing: 0.5px;
  position: fixed;
  z-index: 999; /* 这里补全你原来的z-index数值 */
  /* 提前重置基础outline，避免初始状态的问题 */
  outline: none;
}

input.filterIcon:focus {
  outline: none !important;
  /* 可选自定义焦点样式，按需调整颜色 */
  box-shadow: 0 0 0 2px #64b5f6;
}

input.filterIcon::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

小提醒 #

完全移除焦点样式会影响用键盘导航的用户（比如按Tab键切换元素），所以尽量用自定义的焦点样式替代默认虚线，这样视觉效果和可访问性都能兼顾~

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