Firefox: CSS: изменить стиль, когда кнопка находится в фокусе

Question

Можно удалить дополнительный интервал, специфичный для Firefox, из <button> тегов . Единственным недостатком является то, что контур будет отсутствовать, когда вы будете фокусироваться на кнопке на клавиатуре.

Я бы очень хотел, чтобы мои кнопки работали в Chrome, IE8, Firefox. Если бы я мог использовать CSS :hover, я мог бы легко показать кнопку как сфокусированную, используя тот же стиль, который удаляет этот интервал и контур Firefox.

Есть ли способ сделать это без JavaScript? Мне все равно, если другие браузеры игнорируют правило. На самом деле я бы предпочел :-moz-focused, если есть такая вещь, поэтому я могу быть уверен, что это не произойдет в других браузерах.

Кроме того, если бы в Firefox можно было получить внешнее свечение в стиле Chrome, это было бы вдвое лучше.

Answer 1

На самом деле есть селектор :focus.Разве это не то, что вам нужно?

a:hover, a:active, a:focus {
   border: 1px dotted #f00;
}

Я сделал это с довольно приличными результатами, хотя это возможно при правильной комбинации кликов и вкладок, чтобы получить более одного выделенного элемента (один активныйи еще один сфокусированный).Скорее всего, это не проблема при обычном использовании, хотя вы можете рассмотреть визуальное различие между hover / active и focus.

Также обратите внимание, что :focus поддерживается в IE8 и 9, но не в более ранних версиях.(Диаграмма на quirksmode.org , кажется, указывает, что она не работает в 8, но тестирование показывает иначе.)

Answer 2

CSS имеет для этой цели селектор :focus, который работает как :hover, но применяется к элементу, который имеет фокус.Похоже, что нет специфичной для Firefox версии.