聚焦组合框的 CSS 类

贡献 用户体验
1

我在 Discourse CSS 方面很少迷路，但我找不到这个边框（类别下拉菜单上的蓝色边框）对应的 CSS 类：

image

我认为它是一行 border: 1px solid $tertiary;，并且来自这个文件：discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

但我尝试修改了所有包含 border 的行，在我的测试论坛上仍然能看到这个蓝色边框。

我想更改颜色，或者在获得焦点时删除该边框。

.select-kit {
  &.combo-box {
    .select-kit-header {
      &.is-focused {
        border: 0;
      }
    }
    
    &.is-highlighted {
      .select-kit-header {
        border: 0;
      }
    }

    &.is-expanded {
      .select-kit-wrapper {
        border: 0;
      }
    }
  }
}

或者类似这样的代码：

.select-kit.combo-box .select-kit-header.is-focused {
    border: 0 !important;
}

但似乎都没有对我起作用。

有没有 CSS 高手能提供解决方案？谢谢 :pray:

2 个赞
2

高亮不是来自浏览器吗？

4 个赞
3

这看起来是正确的

image
image855×191 19 KB

但我想你可以用以下方式移除它：

class-name:focus {
   outline: none;
}

或者你可能需要添加 !important，但你需要定义的是 outline 而不是 border。

5 个赞
4

谢谢！

现在我明白为什么它只在 Chrome 上出现了。

我修好了！

3 个赞