Classe CSS da caixa de combinação em foco

Contribuir Experiência do Usuário
1

Raramente me perdo no CSS do Discourse, mas não consigo encontrar a classe CSS dessa borda, a azul no menu suspenso de categorias:

image

Acho que é uma linha border: 1px solid $tertiary; e ela vem deste arquivo: discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

Mas tentei alterar todas as linhas com borda e ainda tenho essa borda azul no meu fórum de teste.

Gostaria de mudar a cor ou remover a borda ao focar.

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

ou algo assim

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

Mas nada parece funcionar para mim.

Alguém, um mago do CSS, teria a solução? Obrigado :pray:

2 curtidas
2

O destaque não é do navegador?

4 curtidas
3

Isso parece correto

image
image855×191 19 KB

mas acho que você pode removê-lo com

class-name:focus {
   outline: none;
}

or talvez você precise adicionar um !important, mas é o outline que você precisa definir, não o border

5 curtidas
4

Obrigado!

Agora entendi por que apareceu apenas no Chrome.

Corrigi!

3 curtidas