CSS class of focused combo box

Contribute UX

AI-generated summary

CSS class of focused combo box

Steven is having trouble finding the CSS class responsible for the blue border on the category dropdown when it is focused. He suspects it’s related to the border: 1px solid $tertiary; line in combo-box.scss and tries to override it with custom CSS, but is unsuccessful.

jomaxro suggests that the highlight might be coming from the browser. smrtey provides a solution, pointing out that the issue is with the outline property, not border, and provides the CSS code to remove it: .clas s-name:focus { outline: none; }.

Steven thanks them and confirms that he has fixed the issue, noting that it was only appearing in Chrome.

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 : discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

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