CSS-класс фокусированного выпадающего списка

Внести вклад UX
1

Я редко теряюсь в CSS для Discourse, но не могу найти класс 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, но вам нужно определить outline, а не border.

5 лайков
4

Спасибо!

Теперь я понял, почему это появилось только в Chrome.

Я исправил это!

3 лайка