CSS class of focused combo box

UX
1

I’m rarely lost on the discourse css, but I can’t find the css class on this border, the blue one on the category dropdown:

image

I think it’s a line border: 1px solid $tertiary; and it comes from this file : https://github.com/discourse/discourse/blob/0431942f3de7c2970ea160fc671b2a5874517c37/app/assets/stylesheets/common/select-kit/combo-box.scss

But I tried to change every lines with border and I still have this blue border on my test forum.

I would like to change the color or delete the border on focus

.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;
      }
    }
  }
}

or something like this

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

But nothing seems to work for me.

Does one css wizard would have the solution? Thanks :pray:

2 Likes
2

Isn’t the highlight from the browser?

4 Likes
3

This seems correct

image
image855×191 19 KB

but I thnk you can remove it with

class-name:focus {
   outline: none;
}

or maybe you need to add an !important, but it’s outline you need to define not border

5 Likes
4

Thanks!

Now I get why it only appeared on Chrome

I fixed it!

3 Likes