Как убрать синюю рамку вокруг кнопки в Firefox?

Question

Я использую Firefox 10, Windows 7 и не уверен, что более старая версия, но когда я нажал кнопку, вокруг кнопки появляется синяя рамка.

Я создал пример ниже.

http://jsfiddle.net/dEvKb/58/

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

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner
{
    border: none;
    outline: none;
}

ниже не работает ...

input[type="button"]:visited
{
    outline: none;
    border: none;
}

Это злая синяя рамка, о которой я говорю.

Answer 1

Это пользовательский интерфейс Firefox, тематический или нет. Не то, что вы получили от кодирования.

Если вас это так беспокоит, вы можете сбросить настройки и определить свой собственный стиль. Вот правило сброса для этого.

button { background: none transparent; border: none; }

Проверьте здесь

И вы можете добавить свой стиль позже. Вот для этого демо . Вы можете определить пользовательские состояния для hover, visited, active так, как вы хотите.

Answer 2

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

Поскольку вид кнопки вы видитеопределяется темой ОС / браузера, а не CSS, нет способа сказать браузеру через CSS «нарисовать эту кнопку, как будто она не сфокусирована».

Также обратите внимание на разницу между <button>и <input type="button">;Вы указываете совпадение CSS в первом примере, но не во втором.