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

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

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

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

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

border: x;

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

Но получить Safari, чтобы удалить эту небольшую вспышку, было бы неплохо.

Спасибо

Ответы

Ответ 1

В вашем случае попробуйте:

input.middle:focus {
    outline-width: 0;
}

Или, вообще говоря, воздействовать на все элементы базовой формы:

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

В комментариях Noah Whitmore предложил сделать это еще дальше, чтобы поддержать элементы, у которых атрибут contenteditable установлен на true (эффективно делая их типом входной элемент). Следующие должны также ориентироваться на них (в браузерах, поддерживающих CSS3):

[contenteditable="true"]:focus {
    outline: none;
}

Хотя я бы не рекомендовал его, для полноты вы всегда можете отключить схему фокуса все с помощью этого:

*:focus {
    outline: none;
}

Имейте в виду, что схема фокуса - это функция доступности и удобства использования; он подсказывает пользователю, какой элемент в данный момент сосредоточен.

Ответ 2

Чтобы удалить его со всех входов

input {
 outline:none;
}

Ответ 3

Это старый поток, но для справки важно отметить, что отключить контур элемента ввода не рекомендуется, поскольку он препятствует доступности.

Свойство outline существует по какой-либо причине - предоставление пользователям четкой индикации фокуса клавиатуры. Для дальнейшего чтения и дополнительных источников по этому вопросу см. http://outlinenone.com/

Ответ 4

Используйте этот код:

input:focus {
    outline: 0;
}

Ответ 5

Вы можете использовать CSS, чтобы отключить это! Это код, который я использую для отключения синей границы:

*:focus {
outline: none;
}

Это приведет к удалению синей границы!

Это рабочий пример: JSfiddle.net

Надеюсь, что это поможет!

Ответ 6

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

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
}

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

Ответ 7

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

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

или

.classname input{
outline-style: none;
}

Ответ 8

Это общая проблема.

По умолчанию outline, что рендеринг браузеров является уродливым.

Смотрите это, например:

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Ответ 9

Другое решение - удалить контур по умолчанию, но активировать его, только если пользователь нажимает клавишу TAB:

document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab' && !document.body.classList.contains('showFocusOutline')) {
    document.body.classList.add('showFocusOutline');
  }
});
document.addEventListener('click', (e) => {
  document.body.classList.remove('showFocusOutline');
});

body:not(.showFocusOutline) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

Ответ 10

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

.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;

}