Удалите Firefox-свечение на сфокусированном текстовом поле

Я не могу понять этого. Я пытаюсь избавиться от этого синего свечения, когда textarea выделяется в Firefox.

Вот мой CSS:

textarea
{
    margin:0;
    padding:0;
    width: 598px;
    height: 600px;
    resize: none;
    outline: none;
}

:focus {
      outline:0;
      outline:none;
}

Он удаляет его в Safari, но мне не повезло с Firefox.

Спасибо! Matt

Ответ 1

Вы можете удалить его с помощью -moz-appearance:none;, хотя это может повлиять на весь внешний вид больше, чем вы хотите.

Ответ 2

как насчет

*:focus {outline:0px none transparent;}

Ответ 3

Если вы используете это в стиле textarea:

outline:none;

... он должен работать со всеми браузерами, а не только с Firefox

Ответ 4

Я уверен, что поведение, характерное для Mac OS X.

Ответ 5

Просто добавьте или определите границу... например, если граница определена, и я добавил схему: none; к моему CSS, это делает трюк.

Ответ 6

Вы не можете удалить свечение в Firefox, я думаю. Единственный способ сделать это - добавить пользовательскую границу к вашему элементу, например border: 1px black;, что сделает поле ввода вообще не свечение.

Только популярные браузеры, которые позволяют тегу outline, - это Safari и Chrome (не уверены в браузерах linux).

Ответ 7

Лучший способ исправить это, на мой взгляд, - определить пользовательскую границу и поведение :focus.

textarea {
    margin:0;
    padding:0;
    width: 598px;
    height: 600px;
    resize: none;
    outline: none;
    border: none;
}

textarea:focus {
      outline: none;
      border: none;
}

Ответ 8

на # 3

   #Solution0:focus{
      border:solid #CCC 1px;
      outline:1px none transparent;
   }

Ответ 9

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

@-moz-document url-prefix() {
    input:focus {
        padding: 5px!important;
    }
}

Вы можете изменить это, чтобы удовлетворить ваши потребности, но некоторым из вас может быть полезно знать правило @-moz-document url-prefix().

Ответ 10

У меня была проблема с этим в текстовом вводе - Firefox использовал свойство border для создания синего свечения: focus - not outline.

input:focus, textarea:focus {
  outline: none; // for other browsers
  border: none; // only necessary if you haven't set a border on the element
}