Как убрать бордер у инпута
Убрать обводку в полях ввода и при кликах на ссылках (input, textarea, focus)
Большинство браузеров при помещении курсора в поле ввода или при клике на ссылку-картинку подсвечивает их рамкой.
Сделано это для того, чтобы пользователи могли осуществлять выбор активных элементов сайта (ссылок, полей ввода, пунктов меню) с помощью клавиши [TAB], и видели какой именно элемент находится в данный момент в фокусе. Все бы хорошо, но у разных браузеров разные рамки для подсветки.
Подсветка картинки в Internet Explorer при клике
Рамка вокруг поля ввода в браузерах Chromium
Рамка в IE и Mozilla Firefox
Такие рамки портят целостность дизайна, поэтому я обычно жертвую этой функцией браузеров в угоду общему дизайну. В общем конечно это не совсем верно с точки зрения юзабилити, но если разобраться хорошенько, то не так уж много пользователей используют для навигации по сайтам только клавиатуру, поэтому я считаю, что можно пренебречь этим “удобством”.
Чтобы убрать рамку, нужно в таблицу стилей вставить следующий код:
Как убрать обводку у input и textarea в Сафари и Хроме?
Очень просто. В таблице стилей пропишите для input и textarea следущее
А теперь поместим курсор в поле ввода.
Выглядит немного неаккуратно, неправда ли?
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню. 
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана
Как убрать обводку у input и textarea в Сафари и Хроме?: 15 комментариев
Если убрать обводку, то надо предложить что-нибудь в замен. А то будет не понятно, какое поле в фокусе в данный момент (что особенно плохо, когда переключаются через tab).
а кто ж мешает: всего лишь менять класс по focus/blur у «родителя» (КО к вашим услугам). а топик о том, как убрать обводку, а не улучшить удобство =)
Уважаемые подсажите как избавиться от этой проблемы но только в opera?
а в чем проблема? если еще актуально. и какая опера?
Вот спасибо. Отличная статейка. А то млин бился со стилями, и border: none, и border:0px; ничего не помогало. Конечно для просто для inputa прокатывает, а вот для input:hover, нифига.
Как убрать выделение границы на элементе ввода текста
Когда элемент HTML «сфокусирован» (в данный момент выбран / вставлен вкладкой), многие браузеры (по крайней мере, Safari и Chrome) будут помещать вокруг него синюю рамку.
В макете, над которым я работаю, это отвлекает и выглядит некорректно.
Firefox, похоже, не делает этого или, по крайней мере, позволяет мне контролировать это с помощью:
Если бы кто-нибудь мог сказать мне, как работает IE, мне было бы любопытно.
Было бы неплохо заставить Safari удалить эту небольшую засветку.
19 ответов
В вашем случае попробуйте:
Или вообще, чтобы повлиять на все основные элементы формы:
В комментариях Ной Уитмор предложил пойти еще дальше, чтобы поддержать элементы, для которых для атрибута contenteditable установлено значение true (фактически делая их типом элемента ввода). Следующее должно быть нацелено и на них (в браузерах с поддержкой CSS3):
Хотя я бы не рекомендовал это для полноты картины, вы всегда можете отключить контур фокуса для всего следующим образом:
Чтобы удалить его со всех входов
Это старый поток, но для справки важно отметить, что отключение контура элемента ввода не рекомендуется, поскольку это затрудняет доступность.
Это сбивало меня с толку в течение некоторого времени, пока я не обнаружил, что линия не была ни границей, ни контуром, это была тень. Итак, чтобы удалить его, мне пришлось использовать это:
Это общая проблема.
схема по умолчанию, отображаемая браузерами, ужасна.
Смотрите это, например:
Я нашел очень сухой веб-сайт, который хорошо все объясняет.
Он обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» при навигации по веб-документу с помощью клавиши TAB (или ее эквивалента). Это особенно полезно для людей, которые не могут пользоваться мышью или имеют нарушения зрения. Если вы удалите схему, вы сделаете свой сайт недоступным для этих людей.
Хорошо, давайте попробуем тот же пример, что и выше, теперь используйте клавишу TAB для навигации.
Обратите внимание, как вы можете определить, где находится фокус, даже не щелкнув поле ввода?
А теперь давайте попробуем outline:none на нашем надежном
Итак, еще раз, используйте клавишу TAB для навигации после щелчка по тексту и посмотрите, что произойдет.
Теперь сравните это с тем же шаблоном, если мы сохраним схему:
Итак, мы установили следующие
Итак, каков ответ?
Удалите уродливые очертания и добавьте собственные визуальные подсказки, указывающие на фокус.
Вот очень простой пример того, что я имею в виду.
Я удаляю контур и добавляю нижнюю границу на : focus и : active. Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, установив их прозрачными на : focus и : active (личные предпочтения )
Итак, мы пробуем описанный выше подход на нашем «реальном» примере из более раннего:
Это можно расширить с помощью внешних библиотек, которые основаны на идее изменения «схемы», а не полного ее удаления, как Materialize
Вы можете получить что-то не уродливое и работающее с очень небольшими усилиями.
Единственное решение, которое сработало для меня
Граница на самом деле является тенью. Чтобы скрыть это, мне пришлось сделать следующее:
Удаление всех стилей фокуса плохо для специальных возможностей и пользователей клавиатуры в целом. Но контуры уродливы, и создание настраиваемого сфокусированного стиля для каждого отдельного интерактивного элемента может быть настоящей проблемой.
Это не мешает вам писать собственные стили фокуса для некоторых элементов, но, по крайней мере, обеспечивает хорошее значение по умолчанию.
Вот как я это делаю:
Вы можете использовать CSS, чтобы отключить это! Это код, который я использую для отключения синей границы:
css input focus border убрать
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Убрать рамку вокруг элемента формы при получении им фокуса в браузерах Safari и Chrome.
Решение
Рис. 1. Свечение вокруг текстового поля в Safari
HTML5 CSS 2.1 IE Cr Op Sa Fx
Поскольку в других браузерах не возникает свечения вокруг полей формы при получении фокуса, приведенный стиль никак в них себя не проявит.
Задача
Избавиться от пунктирной рамки вокруг элементов, получивших фокус (ссылки, кнопки, чексбоксы, радиобатоны).
Теория
Замечали наверное, что при клике по кнопке или ссылке, вокруг этих элементов появляется пунктирная рамка.
 |  |  |
Это функция браузера, которая выделяет элемент для большего удобства пользователя. Вроде эта рамка никому особо не мешает, но вот незадача — она не всегда вписывается в задумку дизайнера и приходиться от нее избавляться.
Решение с помощью CSS
Убираем рамку вокруг ссылок
Для ссылок все просто — добавляем в начало основного или reset.css правило:
Убираем рамку вокруг кнопок
Убираем рамку вокруг input type=»radio»
Детальней об этом можно прочитать тут.
Убираем рамку вокруг input type=»checkbox»
Решение с помощью Javascript
Добавляем в HTML элементу, у которого хотим убрать рамку onfocus=»this.blur();».
Более привлекательный вариант с точки зрения чистоты кода — подключить скрипт:
С библиотекой jQuery:
Заметка
Update 23.01.2011 Помни, что убирая дефолтную рамку фокуса, хорошей практикой является замена эквивалентом в стиле дизайна.
1 ответ 1
Свойство border — не единственный способ задать обводку элемента. В вашем случае обводка задаётся с помощью outline. Отключите его.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css bootstrap input focus или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459
Как убрать всплывающие подсказки при наборе в input?
Делаю строку поиска, ответы через ajax подставляются списком в блок ниже input, но при наборе браузер предлагает(подсказывает) мои прежние запросы, как можно это убрать?
3 ответа 3
задать атрибуту autocomplete значение off
В этом тысячелетии предыдущие фиксы не работают.
Решение: К примеру, для фикса поля с адресом в качестве name нужно использовать название не содержащее подстроку ‘address’.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html input или задайте свой вопрос.
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.22.41046
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.