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

Question

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

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

как удалить выделение границы на входном текстовом элементе

14 ответов

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

input {

    background-color: transparent;

    border: 0px solid;

    height: 20px;

    width: 160px;

    color: #CCC;

}

enter image description here

643 11

google-chrome css border input

11 ответов:

Comments

Ничего не найдено.

CEich · Accepted Answer · 2016-01-05 22:34:00

эта граница используется, чтобы показать, что элемент сфокусирован (т. е. вы можете ввести ввод или нажать кнопку с Enter). Однако, вы можете удалить его:
textarea:focus, input:focus{
    outline: none;
}
вы можете добавить какой-то другой способ для пользователей, чтобы узнать, какой элемент имеет фокус клавиатуры, хотя для удобства использования.

Chrome также применит подсветку к другим элементам, таким как DIV, используемые в качестве модалов. Чтобы предотвратить выделение этих и всех других элементов, вы можете сделать:
*:focus {
    outline: none;
}

gwintrob · Accepted Answer · 2014-02-21 05:43:55

текущий ответ не работает для меня с Bootstrap 3.1.1. Вот что мне пришлось переопределить:
.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

azram19 · Accepted Answer · 2015-12-14 02:31:51

input:focus {
    outline:none;
}
Это будет делать. Оранжевый контур больше не появится.

Kailas · Accepted Answer · 2018-09-03 14:42:00

<input style="border:none" >
работал хорошо для меня. Пожелал, чтобы он был исправлен в самом html ... :)

Joey Morani · Accepted Answer · 2010-08-03 16:51:37

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

Touhid Rahman · Accepted Answer · 2017-07-16 06:31:32

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

nonamehere · Accepted Answer · 2012-10-10 23:43:34

это удалить оранжевую рамку в chrome от всех и любого элемента независимо от того, что и где это
*:focus {
    outline: none;
}

Tabish · Accepted Answer · 2013-08-07 00:45:22

пожалуйста, используйте следующий синтаксис, чтобы удалить границу текстового поля и удалить выделенную границу стиля браузера.
input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

Refilon · Accepted Answer · 2015-05-06 16:27:09

я узнал, что вы также можете использовать:
input:focus{
   border: transparent;
}

madd · Accepted Answer · 2015-09-15 17:28:12

Set
input:focus{
    outline: 0 none;
}
"!важно" на всякий случай. В этом нет необходимости. - "А теперь его нет. –Эд.]

Prashant Gupta · Accepted Answer · 2015-12-14 02:32:13

это определенно будет работать. Оранжевый контур больше не будет отображаться.. Общие для всех тегов:
*:focus {
    outline: none;
}
специфично для некоторых тегов, например: input tag
input:focus {
   outline:none;
}