Почему псевдоэлемент: фокусироваться на кнопке при использовании TAB, но не нажимать?

Я изучал функциональные возможности элементов формы по умолчанию и разные состояния между браузерами. Я нашел что-то довольно странное. Это было протестировано в разных браузерах, и результаты схожи. Скриншоты ниже - от Chrome v44.0.2403.155m (64-разрядная версия Windows).

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

Обратите внимание, что когда я нажимаю на кнопку с помощью мыши, светло-голубого состояния "фокус" это происходит только при вводе на нее.

Я предположил, что это просто использование: focus, и если бы я стилизовал кнопку: фокус, то я смог бы воспроизвести это поведение по умолчанию. Вставьте на кнопку, чтобы выделить ее, нажмите на кнопку, которой нет. Посмотрите на эту стилизованную версию формы...

Когда я нажимаю на первый ввод и вкладку вниз, он делает то же самое, мой пользовательский контур отображается (это хорошо). Однако заметьте, когда я нажимаю на кнопку, она применяет к ней состояние: focus. Это не то же самое, что и поведение по умолчанию. В нестандартной версии щелчок не применяет состояние фокусировки.

Единственный CSS, который я использую на кнопке, - это...

input:focus, button:focus {
    outline: 2px solid green;
}

Вот демо: http://jsfiddle.net/oy83s4up

Как я могу убедиться, что при нажатии кнопки нет контура, только когда он находится на вкладке?. Кроме того, по умолчанию, когда кнопка сфокусирована клавишей табуляции, даже когда она нажата, контур все еще остается, это также функциональность, которую я хочу реплицировать.

Примечание. Я не ищу работу JS, первая анимация - поведение по умолчанию в браузере. Конечно, он может копироваться только css? Если нет, то это ошибка.

Ответ 1

Интересный вопрос!

Что я заметил при проверке кнопки через Inspect Element и срабатывании :focus, кнопка получает стиль outline: -webkit-focus-ring-color auto 5px;.

Однако это не создает схему на кнопке. (Это может быть из-за Chrome на Mac, поскольку tabbing также не создает схему)

Когда я добавляю это к кнопке в стилизованной форме вместо вашего добавленного outline, она не получает синюю пробную тень, которую вы получаете при табуляции. Это странно, если вы спросите меня. Когда я google -webkit-focus-ring-color, я прихожу в этот вопрос на SO. В этом ответе он пишет что-то о [NSColor keyboardFocusIndicatorColor], которое действительно говорит о клавиатурном фокусе (табуляции по форме), а не о фокусе мыши.

Когда вы немного поработали над focus indicators, я приземлился на странице Википедии Фокус (вычисления), содержащий следующий фрагмент текст:

По соглашению клавиша табуляции используется для перемещения фокуса на следующий настраиваемый компонент и сдвиг + вкладка на предыдущую. Когда графические интерфейсы были впервые введены, многие компьютеры не имели мышей, поэтому эта альтернатива была необходима. Эта функция облегчает людям, которые имеют трудное время, используя мышь для использования пользовательского интерфейса.

Это говорит мне, что фокус на кнопке появляется только при нажатии на клавиатуре, потому что вначале необходимо было показать, на каком элементе сосредоточено внимание, а теперь с помощью мыши ясно видно, на чем фокусируется, поскольку вы активно перемещая мышь к кнопке.

Ответ 2

Я не знаю, можно ли использовать только css, но с JS, это так.

Зеленая рамка не отображается при нажатии на кнопку, но когда кнопка фокусируется на вкладке.

var submit = document.getElementById("submit");

var tabbing = false;

window.onkeyup = function (e) {
    if (e.keyCode == 9) {
        tabbing = true;
    }
}

submit.onfocus = function (e) {
    if (tabbing) {
        this.classList.add("tabbed");
    }
};

submit.onblur = function () {
    this.classList.remove("tabbed");
    tabbing = false;
};

#submit.tabbed:focus {
    outline: 2px solid green;
}

<label>Name:</label>
<input type="text" />
<br>
<label>Pass:</label>
<input type="password" />
<br>
<label>Save Password:</label>
<input type="checkbox" />
<br>
<br>
<button id="submit">Submit</button>