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

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

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

enter image description here

Ответы

Ответ 1

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

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

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

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

*:focus {
    outline: none;
}

Ответ 2

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

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Ответ 3

input:focus {
    outline:none;
}

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

Ответ 4

<input style="border:none" >

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

Ответ 5

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

Ответ 6

Решение

*:focus {
    outline: 0;
}

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

Ответ 7

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

*:focus {
    outline: none;
}

Ответ 8

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

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

Ответ 9

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

input:focus{
   border: transparent;
}

Ответ 10

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

*:focus {
    outline: none;
}

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

input:focus {
   outline:none;
}

Ответ 11

Установите

input:focus{
    outline: 0 none;
}

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