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

этот вопрос уже есть ответ здесь:

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

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

enter image description here

11 ответов


эта граница используется, чтобы показать, что элемент сфокусирован (т. е. вы можете ввести вход или нажать кнопку с 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 на Фокусе. Это правильная и лучшая практика.


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

*:focus {
    outline: none;
}

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

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

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

input:focus{
   border: transparent;
}

Set

input:focus{
    outline: 0 none;
}

"!важно" на всякий случай. В этом нет необходимости. - "А теперь его нет. –Эд.]


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

*:focus {
    outline: none;
}

специфический для некоторого тега, например: входной тег

input:focus {
   outline:none;
}