# CSS class of focused combo box

**URL:** https://meta.discourse.org/t/css-class-of-focused-combo-box/143570
**Category:** UX
**Created:** [March 7, 2020, 12:27am UTC](https://meta.discourse.org/t/css-class-of-focused-combo-box/143570 "2020-03-07T00:27:16Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 7, 2020, 12:27am UTC](https://meta.discourse.org/t/css-class-of-focused-combo-box/143570/1 "2020-03-07T00:27:16Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/c/6/c6ded82dd190a49f41035d47b71589b6d4420b1f.png)

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](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

```css
.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

```css
.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 🙏

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [March 7, 2020, 12:47am UTC](https://meta.discourse.org/t/css-class-of-focused-combo-box/143570/2 "2020-03-07T00:47:48Z")

</div>

Isn’t the highlight from the browser?

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 7, 2020, 12:57am UTC](https://meta.discourse.org/t/css-class-of-focused-combo-box/143570/3 "2020-03-07T00:57:38Z")

</div>

This seems correct

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/f/cf153869baba0af45ca88db03c9d6967e50dd16c.png)

but I thnk you can remove it with

```plaintext
class-name:focus {
   outline: none;
}

```

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

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 7, 2020, 1:26am UTC](https://meta.discourse.org/t/css-class-of-focused-combo-box/143570/4 "2020-03-07T01:26:03Z")

</div>

Thanks!

Now I get why it only appeared on Chrome

I fixed it!