Classe CSS d'une combo box focusée

Contribuer UX
1

Je suis rarement perdu avec le CSS de Discourse, mais je n’arrive pas à trouver la classe CSS de cette bordure, celle en bleu sur le menu déroulant des catégories :

image

Je pense qu’il s’agit d’une ligne border: 1px solid $tertiary; qui provient de ce fichier : discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

Mais j’ai essayé de modifier toutes les lignes contenant une bordure, et cette bordure bleue est toujours présente sur mon forum de test.

Je souhaiterais changer la couleur ou supprimer la bordure au 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;
      }
    }
  }
}

ou quelque chose comme ça :

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

Mais rien ne semble fonctionner pour moi.

Est-ce qu’un expert en CSS aurait la solution ? Merci :pray:

2 « J'aime »
2

N’est-ce pas le point fort du navigateur ?

4 « J'aime »
3

Cela semble correct

image
image855×191 19 KB

mais je pense que vous pouvez l’éliminer avec

class-name:focus {
   outline: none;
}

ou peut-être que vous devez ajouter un !important, mais c’est l’outline qu’il faut définir, pas la border.

5 « J'aime »
4

Merci !

Maintenant, je comprends pourquoi cela n’apparaissait que sur Chrome.

Je l’ai corrigé !

3 « J'aime »