Реагировать Выберите для поиска выпадающий синий контур

Question

Выберите; когда выпадающий список доступен для поиска, вокруг курсора появляется синий контур:

https://ibb.co/faG4X8

Я могу избавиться от курсора, используя это:

.Select-input > input {
    color: transparent;
  }

Как мне также избавиться от синего контура на фокусе

спасибо,

Mihai

Answer 1

Вы правы, что outline: 0 или outline: none удалит синий контур, когда элемент сфокусирован.

Это из таблицы стилей браузера по умолчанию. Каждый браузер каким-то образом реализует этот индикатор состояния фокуса.

Я бы хотел предупредить вас, что указание фокуса важно для доступности. Если стиль по умолчанию удален, лучше заменить его другим визуальным индикатором того, что элемент находится в фокусе. Без этого изменения сайт практически невозможно обойти, если кто-то использует клавиатуру или потенциально другие нетрадиционные методы доступа.

Из спецификации html5 -

«… если вместо этого не доступен альтернативный стиль фокусировки, страница будет значительно менее удобна для людей, которые в основном перемещаются по страницам с помощью клавиатуры, или для людей с ослабленным зрением, которые используют контуры фокуса, чтобы помочь им перемещаться по странице. «

дальнейшее чтение: Хватит возиться с контуром фокуса браузера по умолчанию