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

Question

Когда HTML-элемент «сфокусирован» (в настоящее время выбран / с вкладками), многие браузеры (по крайней мере, Safari и Chrome) поместят синюю рамку вокруг него.

Для макета, над которым я работаю, это отвлекает и выглядит неправильно.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox, похоже, не делает этого или, по крайней мере, позволит мне управлять им с помощью:

border: x;

Если кто-то может сказать мне, как работает IE, мне было бы любопытно.

Было бы неплохо заставить Safari убрать эту маленькую вспышку.

Answer 1

Вы можете попробовать это также

input[type="text"] {
outline-style: none;
}

или

.classname input{
outline-style: none;
}

Answer 2

Вы можете удалить оранжевую или синюю рамку (контур) вокруг полей ввода текста с помощью: контур: нет

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

Answer 3

Попробуйте также

.form-group input {

  display: block;
  background: none;
  padding: 0.175rem 0.175rem 0.0875rem;
  font-size: 1.4rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: #ccc;
  transition: all 0.28s ease;
  box-shadow: none;

}

Answer 4

Удалить контур, когда фокус находится на элементе, используя свойство CSS ниже:

input:focus {
    outline: 0;
}

Это свойство CSS удаляет контур для всех полей ввода в фокусе или использует псевдокласс для удаления контура элемента, используя свойство CSS, указанное ниже.

.className input:focus {
    outline: 0;
} 

Это свойство удаляет контур для выбранного элемента.