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

611

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

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

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

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

border: x;

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

Получение Safari для удаления этой маленькой вспышки было бы неплохо.

— user170579
источник

1102

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

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

Или вообще, чтобы повлиять на все основные элементы формы:

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

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

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

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

*:focus {
    outline: none;
}

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

— Cᴏʀʏ
источник

10

Спасибо Кори, отличный совет. Вам также нужно назначить CSS текстовой области, чтобы охватить все поля ввода. input:focus, textarea:focus {outline: none;}

— BaronGrivet

7

не забудьте также выбратьselect:focus {outline:none;}

— Geek Num 88

2

Есть также <button>тег, который, помимо прочего, используется jQuery UI и Twitter Bootstrap, поэтому я добавлю button: focusего в список для полноты изложения.

— Крис Партон

1

По моему опыту это может произойти без фокуса, и в этом случае я должен был применить это кbutton, button:focus { outline:none; }

— Майк Лайонс

1

@ Cᴏʀʏ Не могли бы вы переместить заметку об удобстве и простоте использования в самый верх вашего вопроса? IMO, это значительно улучшит ваш ответ, так как удаление функций a11y - плохая практика.

— Йозеф Энгельфрост

64

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

input {
 outline:none;
}

— marcjae
источник

31

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

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

— Вооз - восстановить Монику
источник

1

Boaz, FYI input.middle {outline: none} по-прежнему позволит вам проходить через элементы (включая input.middle). Нажатие клавиши табуляции также фокусируется на теге ввода. Единственное, что вы не сможете увидеть фокус (контурный фокус) на нем. Так что использовать его не так уж и вредно ..

— :)

11

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- и это точно моя точка зрения. Удаление контура отключает визуальную индикацию события фокуса, а не фактическое событие. Удаление визуальной индикации означает, что вам становится труднее для людей с ограниченными возможностями, которые полагаются на эту индикацию.

— Вооз - восстановить Монику

2

Иногда нам нужно идти на компромисс, чтобы чего-то достичь :)

— Аниш Наир

6

@AnishNair Правда. Но чаще всего люди, читающие эту ветку, предпочли бы легкий выход (то есть outline:none;) без учета последствий. То, что что-то легко и экономит время, не означает, что это лучше всего практиковать :)

— Вооз - восстановить Монику

5

Я опаздываю к обсуждению, но вы все еще можете стилизовать сфокусированное состояние входов (например, изменение цвета или ширины границы). Пока вы помните о доступности (хороший контраст и т. Д.), Она так же доступна, как и схемы по умолчанию.

— Мег

18

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

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

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

Показать фрагмент кода

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>

Развернуть фрагмент

Наиболее распространенное «исправление», которое наиболее рекомендуется, outline:none- которое при неправильном использовании - это катастрофа для доступности.

Итак ... в чем смысл в любом случае?

Там есть очень сухой вырезать сайт я нашел что объясняет все хорошо.

Он обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» при навигации по веб-документу с помощью клавиши TAB (или эквивалентной). Это особенно полезно для людей, которые не могут использовать мышь или имеют нарушения зрения. Если вы удалите схему, вы сделаете свой сайт недоступным для этих людей.

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

Показать фрагмент кода

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Развернуть фрагмент

Заметьте, как вы можете определить, где находится фокус, даже не нажимая на вход?

Теперь давайте попробуем outline:noneна нашем верном<input>

Итак, еще раз, используйте TABклавишу для навигации после нажатия на текст и посмотрите, что произойдет.

Показать фрагмент кода

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Развернуть фрагмент

Видите, как сложнее понять, где находится фокус? Единственный признак - курсор мигает. Мой пример выше слишком упрощен. В реальных ситуациях у вас не будет только одного элемента на странице. Что-то еще в этом роде.

Показать фрагмент кода

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Развернуть фрагмент

Теперь сравните это с тем же шаблоном, если мы сохраним схему:

Показать фрагмент кода

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Развернуть фрагмент

Итак, мы установили следующее

Контуры безобразны
Удаление их усложняет жизнь.

Так каков ответ?

Удалите уродливый контур и добавьте свои собственные визуальные подсказки, чтобы указать фокус.

Вот очень простой пример того, что я имею в виду.

Я удаляю контур и добавляю нижнюю границу для : focus и : active . Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, устанавливая их прозрачными на : focus и : active (личные предпочтения)

Показать фрагмент кода

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

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

Развернуть фрагмент

Итак, мы попробуем подход выше с нашим «реальным» примером из предыдущего:

Показать фрагмент кода

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Развернуть фрагмент

Это может быть расширено за счет использования внешних библиотек, которые основаны на идее изменения «контура», а не удаления его полностью, как Materialise

Вы можете получить что-то не уродливое и работающее без особых усилий.

Показать фрагмент кода

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Развернуть фрагмент

— Я хаз коде
источник

18

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

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

— Рикард Аскелёф
источник

6

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

*:focus {
outline: none;
}

Это удалит синюю границу!

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

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

— 1010
источник

4

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

Таким образом, лучший компромисс, который я нашел, состоит в том, чтобы показывать стили контура только тогда, когда мы обнаруживаем, что пользователь использует клавиатуру для навигации. По сути, если пользователь нажимает клавишу TAB, мы показываем контуры, а если он использует мышь, мы их скрываем.

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

Вот как я это делаю:

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *: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/>

Развернуть фрагмент

— Том Эстерез
источник

Это тщательный подход. clickСлушатель приятно прикасаться.

— Кит

4

Я перепробовал все ответы и все еще не мог заставить работать на Мобиле , пока не нашел-webkit-tap-highlight-color .

Итак, что сработало для меня это ...

* { -webkit-tap-highlight-color: transparent; }

— Oneezy
источник

1

Вот решение, которое я искал. Это особенно полезно, когда вы работаете с сенсорным экраном с такими элементами, как li

— Anand G

4

Единственное решение, которое работало со мной

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

— Али Аль Амин
источник

3

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

input:focus {
    outline: 0;
}

— Тухид Рахман
источник

2

Ни одно из решений не сработало для меня в Firefox.

Следующее решение изменяет стиль границы для фокуса для Firefox и устанавливает контур в none для других браузеров.

Я эффективно сделал, чтобы граница фокуса перешла от синего свечения на 3 пикселя к стилю границы, который соответствует границе текстовой области. Вот несколько стилей границ:

Пунктирная граница (граница 2px пунктирная красная):

Без границ! (граница 0px):

Текстовая граница (граница 1px, сплошная серая):

Вот код:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

Развернуть фрагмент

— 1,21 гигаватт
источник

1

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

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

или

.classname input{
outline-style: none;
}

— Сантош Халсе
источник

1

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

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

— Ризо
источник

0

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

input:focus {
    outline: 0;
}

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

.className input:focus {
    outline: 0;
}

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

— Shailesh
источник

0

Попробуй это

*:focus {
    outline: none;
}

Это повлияет на все ваши страницы

— Subindas вечера
источник