Почему мой контур CSS появляется при вводе как при щелчке мыши, так и при фокусировке с клавиатуры, несмотря на использо ⇐ Javascript

[Anonymous]

У меня есть простая HTML-страница с элементом ввода:

Код: Выделить всё

Hello World!

И следующий CSS в style.css:

Код: Выделить всё

input {
outline: none;
}
input:focus {
outline: none;
}
input:focus-visible {
outline: 1px solid black;
}

Моя цель — полностью удалить контур при фокусировке ввода с помощью щелчка мыши, но показать черный контур толщиной 1 пиксель при фокусировке с помощью клавиатуры (для специальных возможностей).
Однако я вижу контур в обоих случаях: контур браузера по умолчанию при щелчке мыши и контур на вкладке клавиатуры. Я тестировал в Chrome и Firefox (последние версии). Что я делаю не так и как это исправить, чтобы контур отображался только при фокусе клавиатуры?

Подробнее здесь: https://stackoverflow.com/questions/798 ... oard-focus