Classe CSS della casella combinata con focus

Contribuisci UX
1

Raramente mi perdo nel CSS di Discourse, ma non riesco a trovare la classe CSS per questo bordo, quello blu nel menu a tendina delle categorie:

image

Penso che sia una riga border: 1px solid $tertiary; e provenga da questo file: discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

Ma ho provato a modificare ogni riga con un bordo e ho ancora questo bordo blu nel mio forum di prova.

Vorrei cambiare il colore o eliminare il bordo quando è attivo.

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

o qualcosa del genere

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

Ma nulla sembra funzionare per me.

C’è qualche mago del CSS che potrebbe avere la soluzione? Grazie :pray:

2 Mi Piace
2

Non è l’evidenziazione dal browser?

4 Mi Piace
3

Questo sembra corretto

image
image855×191 19 KB

ma penso che tu possa rimuoverlo con

class-name:focus {
   outline: none;
}

o forse devi aggiungere un !important, ma devi definire l’outline, non il border.

5 Mi Piace
4

Grazie!

Ora capisco perché è apparso solo su Chrome.

L’ho risolto!

3 Mi Piace