CSS-Klasse des fokussierten Kombinationsfelds

Beitragen UX
1

Ich bin bei Discourse-CSS normalerweise selten verloren, aber ich finde die CSS-Klasse für diesen Rand nicht – den blauen Rand im Kategorie-Dropdown:

image

Ich vermute, es ist eine Zeile border: 1px solid $tertiary;, die aus dieser Datei stammt: discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

Ich habe jedoch versucht, jede Zeile mit border zu ändern, aber auf meinem Testforum ist dieser blaue Rand immer noch vorhanden.

Ich möchte die Farbe ändern oder den Rand beim Fokus entfernen.

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

oder so etwas wie:

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

Aber nichts scheint bei mir zu funktionieren.

Hat vielleicht ein CSS-Experte eine Lösung? Danke :pray:

2 „Gefällt mir“
2

Ist das Highlight nicht aus dem Browser?

4 „Gefällt mir“
3

Das scheint korrekt zu sein

image
image855×191 19 KB

aber ich denke, du kannst es mit folgendem entfernen:

class-name:focus {
   outline: none;
}

oder vielleicht musst du ein !important hinzufügen, aber du musst den outline definieren, nicht den border.

5 „Gefällt mir“
4

Danke!

Jetzt verstehe ich, warum es nur in Chrome aufgetreten ist.

Ich habe es behoben!

3 „Gefällt mir“