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

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

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

enter image description here

+949
источник поделиться
11 ответов

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

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

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

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

*:focus {
    outline: none;
}
+1771
источник

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

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
+92
источник
другие ответы

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


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

input:focus {
    outline:none;
}

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

+81
источник 
<input style="border:none" >

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

+42
источник

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

+32
источник

Решение

*:focus {
    outline: 0;
}

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

+21
источник

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

*:focus {
    outline: none;
}
+18
источник

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

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
+15
источник

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

input:focus{
   border: transparent;
}
+9
источник

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

*:focus {
    outline: none;
}

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

input:focus {
   outline:none;
}
+8
источник

Установите

input:focus{
    outline: 0 none;
}

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

+8
источник

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