フォーカスされたコンボボックスの CSS クラス

貢献 UX
1

Discourse の CSS について、普段は迷うことが少ないのですが、カテゴリドロップダウンの青い枠線に使われている CSS クラスが見つかりません。

image

おそらく border: 1px solid $tertiary; という行で、このファイルから来ているのだと思います：discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

しかし、border が含まれるすべての行を試してみても、テストフォーラムではまだこの青い枠線が残ってしまいます。

フォーカス時にこの枠線の色を変更するか、削除したいと考えています。

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

あるいは以下のようなコードも試しましたが、

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

どうやらどちらも機能しないようです。

CSS のエキスパートで解決策をご存知の方がいらっしゃいませんか？よろしくお願いいたします：:pray:

「いいね！」 2
2

ハイライトはブラウザのものではありませんか？

「いいね！」 4
3

これは正しいようです

image
image855×191 19 KB

ただし、以下で削除できると思います

class-name:focus {
   outline: none;
}

あるいは !important を追加する必要があるかもしれませんが、定義すべきは border ではなく outline です

「いいね！」 5
4

ありがとう！

今、Chrome のみ表示された理由がわかりました。

修正しました！

「いいね！」 3