Формирование поля формы

Question

Я пытаюсь удалить синий контур "гало", который есть у элементов формы в Firefox в OS X. Используя CSS, я могу удалить ореол в Safari в OS X через:

input {
  outline: none;
}

Но это, похоже, не действует в Firefox, равно как и свойство -moz-outline.

Answer 1

Другой вариант, который позаботится обо всех «гало», таков:

*:focus {outline: none;}

Я думаю, вы могли бы добавить !important, если хотите, но я еще не столкнулся с необходимостью.

Answer 2

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Answer 3

Я считаю, что это то, что вы ищете:

input:focus { outline: none; }

Answer 4

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

border: 1px solid #000;

Я могу избавиться от ореола фокуса, но это, очевидно, меняет внешний вид элемента ввода. border-style: inset; кажется наиболее похожим на «нативный» внешний вид, но он все еще не совсем правильный, поэтому, насколько я могу судить прямо сейчас, вы можете либо подавить ореол, либо иметь естественный вид ввода.

Answer 5

Я считаю, что стиль всех элементов формы хранится в файле forms.css. В OS X, я думаю, он находится здесь:

/Applications/Firefox.app/Contents/MacOS/res/forms.css

Возможно, вы захотите просмотреть этот файл и посмотреть, есть ли какой-либо очевидный CSS, который влияет на внешний вид, который вы видите. Например, в Windows элемент input имеет -moz-appearance: textfield;, о котором я не смог найти никакой документации, так что, возможно, есть некоторый «родной» стиль -moz-* в тех полях, который управляет свечением, что вы могли бы переопределить.

Другая попытка может заключаться в том, чтобы переопределить все в этом файле, изменив определения input на input2 или что-то еще (после создания копии, конечно). Затем вы можете увидеть, сможете ли вы остановить свечение, манипулируя CSS по умолчанию.

После того, как вы определили, что можете остановить его (если можете), вы можете постепенно добавлять стили назад, пока не найдете тот, который вызывает нежелательный эффект. Вероятно, вы можете ускорить этот процесс, исключив из тестирования стили, которые явно не связаны (например, - line-height: normal !important; почти наверняка не несет ответственности за голубой свет вокруг полей).

Answer 6

Возможно, у вас есть активная таблица стилей пользователя на вашем компьютере, создающая такое поведение. Некоторые дополнения делают это (чтобы сделать фокус более очевидным). Посмотрите в chome forder Firefox (в ваших пользовательских файлах) В качестве альтернативы попробуйте с

input {outline: none!important;}

Также

• Стильный плагин имеет стиль для этого, может быть, он установлен?
• Есть скрипт greasemonkey, который делает это. Если он у вас установлен, отключите его

Они оба имеют приоритет над! Важным атрибутом.

Итак: у вас есть несколько мест, чтобы посмотреть * Пользовательские таблицы стилей * Stylysh * грязная обезьяна * Anothes Add-on

Один из них, должно быть, заставляет наброски

Answer 7

Я выхожу на конечность, так как у меня нет OSX для его проверки ... но работает ли удаление границы?

input {
  border: 0;
}