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


611

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

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

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

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

border: x;

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

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

Ответы:


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

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


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 - плохая практика.
Йозеф Энгельфрост


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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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);
 }


2

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

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

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

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

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

Текстовая граница (граница 1px, сплошная серая): Текстовая граница.  граница 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

Вы можете удалить оранжевую или синюю рамку (контур) вокруг полей ввода текста с помощью: 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;
} 

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.