Как удалить границу (контур) вокруг полей ввода текста/ввода? (Хром)

Может ли кто-нибудь объяснить, как удалить оранжевую или синюю границу (контур) вокруг полей ввода текста/ввода? Я думаю, что только Chrome показывает, что поле ввода активно. Здесь ввод CSS, который я использую:

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

enter image description here

949
03 авг. '10 в 16:49
источник поделиться
11 ответов

Эта граница используется, чтобы показать, что элемент сфокусирован (т.е. вы можете ввести ввод или нажать кнопку с помощью Enter). Вы можете удалить его, хотя:

textarea:focus, input:focus{
    outline: none;
}

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

Chrome также будет применять подсветку для других элементов, таких как DIV, которые используются как модальные. Чтобы предотвратить выделение этих и всех других элементов, вы можете:

*:focus {
    outline: none;
}
1771
03 авг. '10 в 16:52
источник

Связанные вопросы


Похожие вопросы

Текущий ответ не работал у меня с Bootstrap 3.1.1. Вот что мне пришлось переопределить:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
92
21 февр. '14 в 6:43
источник
input:focus {
    outline:none;
}

Это будет сделано. Оранжевый контур больше не появится.

81
03 авг. '10 в 16:52
источник
<input style="border:none" >

Хорошо работал у меня. Хотелось, чтобы это было исправлено в самом html...:)

42
08 окт. '14 в 10:26
источник

Я нашел решение.
Я использовал: outline:none; в CSS и, похоже, сработал. Все равно, спасибо за помощь.:)

32
03 авг. '10 в 16:51
источник

Решение

*:focus {
    outline: 0;
}

PS: используйте outline:0 вместо outline:none в фокусе. Это действительная и лучшая практика.

21
23 мая '13 в 12:55
источник

это удаляет оранжевую рамку из хрома из всех и любого элемента независимо от того, где и где он

*:focus {
    outline: none;
}
18
10 окт. '12 в 23:43
источник

Пожалуйста, используйте следующий синтаксис, чтобы удалить границу текстового поля и удалить выделенную границу стиля браузера.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
15
08 мая '13 в 11:55
источник

Я узнал, что вы также можете использовать:

input:focus{
   border: transparent;
}
9
06 мая '15 в 15:51
источник

Это определенно сработает. Оранжевый контур больше не появится. Общие для всех тегов:

*:focus {
    outline: none;
}

Конкретный для некоторого тега, ex: тег ввода

input:focus {
   outline:none;
}
8
19 апр. '13 в 9:51
источник

Установите

input:focus{
    outline: 0 none;
}

"! important" на всякий случай. Это не нужно. [И теперь это исчезло. – ред.]

8
05 сент. '13 в 18:28
источник

Посмотрите другие вопросы по меткам или Задайте вопрос