Когда HTML-элемент «сфокусирован» (в настоящее время выбран / вставлен на вкладку), многие браузеры (по крайней мере, Safari и Chrome) поместят синюю рамку вокруг него.
Для макета, над которым я работаю, это отвлекает и выглядит неправильно.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox, похоже, не делает этого или, по крайней мере, позволит мне управлять им с помощью:
border: x;
Если кто-то может сказать мне, как работает IE, мне было бы любопытно.
Получение Safari для удаления этой маленькой вспышки было бы неплохо.
input:focus, textarea:focus {outline: none;}
select:focus {outline:none;}
<button>
тег, который, помимо прочего, используется jQuery UI и Twitter Bootstrap, поэтому я добавлюbutton: focus
его в список для полноты изложения.button, button:focus { outline:none; }
Чтобы удалить его из всех входов
источник
Это старый поток, но для справки важно отметить, что отключение контура входного элемента не рекомендуется, так как это затрудняет доступ.
Свойство структуры присутствует по определенной причине - оно дает пользователям четкое представление о фокусе клавиатуры. Для дальнейшего чтения и дополнительных источников по этой теме см. Http://outlinenone.com/
источник
Only thing is that you won't be able to see the focus(outline focus) on it
- и это точно моя точка зрения. Удаление контура отключает визуальную индикацию события фокуса, а не фактическое событие. Удаление визуальной индикации означает, что вам становится труднее для людей с ограниченными возможностями, которые полагаются на эту индикацию.outline:none;
) без учета последствий. То, что что-то легко и экономит время, не означает, что это лучше всего практиковать :)Это общая проблема.
По умолчанию очертания , что браузеры делают это некрасиво.
Смотрите это, например:
Показать фрагмент кода
Наиболее распространенное «исправление», которое наиболее рекомендуется,
outline:none
- которое при неправильном использовании - это катастрофа для доступности.Итак ... в чем смысл в любом случае?
Там есть очень сухой вырезать сайт я нашел что объясняет все хорошо.
Хорошо, давайте попробуем тот же пример, что и выше, теперь используйте
TAB
клавишу для навигации.Показать фрагмент кода
Заметьте, как вы можете определить, где находится фокус, даже не нажимая на вход?
Теперь давайте попробуем
outline:none
на нашем верном<input>
Итак, еще раз, используйте
TAB
клавишу для навигации после нажатия на текст и посмотрите, что произойдет.Показать фрагмент кода
Видите, как сложнее понять, где находится фокус? Единственный признак - курсор мигает. Мой пример выше слишком упрощен. В реальных ситуациях у вас не будет только одного элемента на странице. Что-то еще в этом роде.
Показать фрагмент кода
Теперь сравните это с тем же шаблоном, если мы сохраним схему:
Показать фрагмент кода
Итак, мы установили следующее
Так каков ответ?
Удалите уродливый контур и добавьте свои собственные визуальные подсказки, чтобы указать фокус.
Вот очень простой пример того, что я имею в виду.
Я удаляю контур и добавляю нижнюю границу для : focus и : active . Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, устанавливая их прозрачными на : focus и : active (личные предпочтения)
Показать фрагмент кода
Итак, мы попробуем подход выше с нашим «реальным» примером из предыдущего:
Показать фрагмент кода
Это может быть расширено за счет использования внешних библиотек, которые основаны на идее изменения «контура», а не удаления его полностью, как Materialise
Вы можете получить что-то не уродливое и работающее без особых усилий.
Показать фрагмент кода
источник
Это смущало меня некоторое время, пока я не обнаружил, что линия не была ни границей, ни контуром, это была тень. Таким образом, чтобы удалить это, я должен был использовать это:
источник
Вы можете использовать CSS, чтобы отключить это! Вот код, который я использую для отключения синей рамки:
Это удалит синюю границу!
Это рабочий пример: JSfiddle.net
Надеюсь, поможет!
источник
Удаление всех стилей фокуса плохо для специальных возможностей и пользователей клавиатуры в целом. Но контуры уродливы, и обеспечение индивидуального стиля для каждого интерактивного элемента может быть настоящей болью.
Таким образом, лучший компромисс, который я нашел, состоит в том, чтобы показывать стили контура только тогда, когда мы обнаруживаем, что пользователь использует клавиатуру для навигации. По сути, если пользователь нажимает клавишу TAB, мы показываем контуры, а если он использует мышь, мы их скрываем.
Это не мешает вам писать собственные стили фокуса для некоторых элементов, но, по крайней мере, обеспечивает хорошее значение по умолчанию.
Вот как я это делаю:
источник
click
Слушатель приятно прикасаться.Я перепробовал все ответы и все еще не мог заставить работать на Мобиле , пока не нашел
-webkit-tap-highlight-color
.Итак, что сработало для меня это ...
источник
Единственное решение, которое работало со мной
источник
Используйте этот код:
источник
Ни одно из решений не сработало для меня в Firefox.
Следующее решение изменяет стиль границы для фокуса для Firefox и устанавливает контур в none для других браузеров.
Я эффективно сделал, чтобы граница фокуса перешла от синего свечения на 3 пикселя к стилю границы, который соответствует границе текстовой области. Вот несколько стилей границ:
Пунктирная граница (граница 2px пунктирная красная):
Без границ! (граница 0px):
Текстовая граница (граница 1px, сплошная серая):
Вот код:
источник
Вы можете попробовать это также
или
источник
Вы можете удалить оранжевую или синюю рамку (контур) вокруг полей ввода текста с помощью: outline: none
источник
Удалите контур, когда фокус находится на элементе, используя свойство CSS ниже:
Это свойство CSS удаляет контур для всех полей ввода в фокусе или использует псевдокласс для удаления контура элемента, используя свойство CSS ниже.
Это свойство удаляет контур для выбранного элемента.
источник
Попробуй это
Это повлияет на все ваши страницы
источник