Как удалить границу (контур) вокруг полей ввода текста/ввода? (Хром)
Может ли кто-нибудь объяснить, как удалить оранжевую или синюю границу (контур) вокруг полей ввода текста/ввода? Я думаю, что только Chrome показывает, что поле ввода активно. Здесь ввод CSS, который я использую:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
Эта граница используется, чтобы показать, что элемент сфокусирован (т.е. вы можете ввести ввод или нажать кнопку с помощью Enter). Вы можете удалить его, хотя:
textarea:focus, input:focus{
outline: none;
}
Возможно, вам захочется добавить другой способ узнать, какой элемент имеет клавиатурный фокус, но для удобства использования.
Chrome также будет применять подсветку для других элементов, таких как DIV, которые используются как модальные. Чтобы предотвратить выделение этих и всех других элементов, вы можете:
*:focus {
outline: none;
}
Текущий ответ не работал у меня с Bootstrap 3.1.1. Вот что мне пришлось переопределить:
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
input:focus {
outline:none;
}
Это будет сделано. Оранжевый контур больше не появится.
<input style="border:none" >
Хорошо работал у меня. Хотелось, чтобы это было исправлено в самом html...:)
Я нашел решение.
Я использовал: outline:none;
в CSS и, похоже, сработал. Все равно, спасибо за помощь.:)
Решение
*:focus {
outline: 0;
}
PS: используйте outline:0
вместо outline:none
в фокусе. Это действительная и лучшая практика.
это удаляет оранжевую рамку из хрома из всех и любого элемента независимо от того, где и где он
*:focus {
outline: none;
}
Пожалуйста, используйте следующий синтаксис, чтобы удалить границу текстового поля и удалить выделенную границу стиля браузера.
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
Я узнал, что вы также можете использовать:
input:focus{
border: transparent;
}
Это определенно сработает. Оранжевый контур больше не появится. Общие для всех тегов:
*:focus {
outline: none;
}
Конкретный для некоторого тега, ex: тег ввода
input:focus {
outline:none;
}
Установите
input:focus{
outline: 0 none;
}
"! important" на всякий случай. Это не нужно. [И теперь это исчезло. – ред.]
Посмотрите другие вопросы по меткам input css google-chrome border или Задайте вопрос