Tabulator表头过滤器input:focus样式修改：如何去除内层额外黑边框

你遇到的额外边框是浏览器默认的outline轮廓线，并非Tabulator内置的边框样式，修改时只要覆盖对应属性即可：

1. 优先给过滤器输入框的焦点样式增加outline: none规则，同时注意选择器权重要高于Tabulator默认样式，建议带上Tabulator的专属类前缀避免全局污染：

.tabulator .tabulator-header-filter input:focus {
  border: 1px solid #1bb394;
  /* 清除默认轮廓线 */
  outline: none;
  /* 同步清除Tabulator可能自带的焦点阴影 */
  box-shadow: none;
}

2. 如果清除后边框仍存在，可追加父容器的焦点样式覆写，避免:focus-within伪类触发的额外样式：

.tabulator .tabulator-header-filter:focus-within {
  outline: none;
  box-shadow: none;
  border: none;
}

以上样式优先级足够覆盖Tabulator内置规则，不需要额外加!important即可生效。

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