CSS - удаление активного поля ввода

Используя только html и css, как отключить синюю (в Firefox) подсветку цвета вокруг активного поля ввода. Я пробовал использовать input {outline:none;}, но без успеха. Спасибо за помощь! =)

ok, игнорируя предыдущий код о контуре, я выбрал неправильное свойство для изменения. То, что я пытаюсь получить, - просто удалить подсветку (независимо от того, какой браузер, его полужирная и цветная рамка, которая появляется) вокруг поля ввода активной формы, без изменения или отключения стиля. Спасибо =)

Ответы

Ответ 1

Вы должны использовать: объявление фокуса. В этом случае:

input:focus {outline:none;}

Все входные данные в вашем проекте не будут иметь синюю рамку.

Если вам нужен конкретный атрибут, используйте это:

input[type=text]:focus {outline:none;}

Надеюсь, это поможет. =)

Ответ 2

Смотрите fiddle.

Кажется, вам нужно установить свойство border, чтобы сделать работу outline: none. Если вы прокомментируете в директиве border, контур исчезнет.

Ответ 3

input {border:0; outline:none;}

следует удалить все границы/контуры.

Ответ 4

Ответ проще, чем я переделал:

box-shadow:none;

Ответ 5

Изменение: мое решение было сложно. Это так просто:

input:focus {
  outline: none;
}

Вам необходимо настроить таргетинг на состояние: focus.

Ответ 6

Чтобы удалить выделение, добавьте это правило в поле ввода: 

-moz-appearance:none;

Это также можно сделать для браузеров на основе WebKit, используя соответствующий префикс: 

-webkit-appearance:none;

Это должно заботиться о любых границах, набросках и т.д., используя только одно свойство CSS. Для браузеров, отличных от пары WebKit и Firefox - Opera и IE, рекомендуется также включать свойства border и outline, обеспечивая кросс-совместимость браузера.

Ответ 7

button {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}

Ответ 8

Добавьте !important и определите цвет/цвет фона в вашем CSS файле.

#title {
    font-size: 40px;
    color: black !important;
}

Ответ 9

Это должно работать для большинства типов ввода в Firefox:

input::-moz-focus-inner { border: 0; }

Ответ 10

лучший способ сделать это для всех браузеров, сохраняя ваш тег ввода в другом теге div, чтобы покрыть границу

HTML-код

<div class='rel lef srch_blck'>
   <input type='text' class='rel lef srch_pad' name='srch_inp'/>
</div>

выше html позволяет добавить следующий css, чтобы удалить границу

.srch_blck{ overflow:hidden;width:298px;height:28px; }
.srch_pad{ left:-1px;top:-1px;width:300px;height:31px; }