Как убрать границы input css
Как убрать обводку при клике на input
При клике и фокусе на input появляется обводка. Как её убрать?
9 ответов 9
Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.
Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap
У меня была такая проблема. Я просто сделал так:
Примените свойство outline:none
Конкретно для input и конкретно при фокусе на нем:
Проверял на Chrome.
Попробуйте поставить box-shadow: none;
Допишите также onFocus=»this.blur()»
Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.
Как убрать выделение границы на элементе ввода текста
Когда элемент HTML «сфокусирован» (в данный момент выбран / вставлен вкладкой), многие браузеры (по крайней мере, Safari и Chrome) будут помещать вокруг него синюю рамку.
В макете, над которым я работаю, это отвлекает и выглядит некорректно.
Firefox, похоже, не делает этого или, по крайней мере, позволяет мне контролировать это с помощью:
Если бы кто-нибудь мог сказать мне, как работает IE, мне было бы любопытно.
Было бы неплохо заставить Safari удалить эту небольшую засветку.
19 ответов
В вашем случае попробуйте:
Или вообще, чтобы повлиять на все основные элементы формы:
В комментариях Ной Уитмор предложил пойти еще дальше, чтобы поддержать элементы, для которых для атрибута contenteditable установлено значение true (фактически делая их типом элемента ввода). Следующее должно быть нацелено и на них (в браузерах с поддержкой CSS3):
Хотя я бы не рекомендовал это для полноты картины, вы всегда можете отключить контур фокуса для всего следующим образом:
Чтобы удалить его со всех входов
Это старый поток, но для справки важно отметить, что отключение контура элемента ввода не рекомендуется, поскольку это затрудняет доступность.
Это сбивало меня с толку в течение некоторого времени, пока я не обнаружил, что линия не была ни границей, ни контуром, это была тень. Итак, чтобы удалить его, мне пришлось использовать это:
Это общая проблема.
схема по умолчанию, отображаемая браузерами, ужасна.
Смотрите это, например:
Я нашел очень сухой веб-сайт, который хорошо все объясняет.
Он обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» при навигации по веб-документу с помощью клавиши TAB (или ее эквивалента). Это особенно полезно для людей, которые не могут пользоваться мышью или имеют нарушения зрения. Если вы удалите схему, вы сделаете свой сайт недоступным для этих людей.
Хорошо, давайте попробуем тот же пример, что и выше, теперь используйте клавишу TAB для навигации.
Обратите внимание, как вы можете определить, где находится фокус, даже не щелкнув поле ввода?
А теперь давайте попробуем outline:none на нашем надежном
Итак, еще раз, используйте клавишу TAB для навигации после щелчка по тексту и посмотрите, что произойдет.
Теперь сравните это с тем же шаблоном, если мы сохраним схему:
Итак, мы установили следующие
Итак, каков ответ?
Удалите уродливые очертания и добавьте собственные визуальные подсказки, указывающие на фокус.
Вот очень простой пример того, что я имею в виду.
Я удаляю контур и добавляю нижнюю границу на : focus и : active. Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, установив их прозрачными на : focus и : active (личные предпочтения )
Итак, мы пробуем описанный выше подход на нашем «реальном» примере из более раннего:
Это можно расширить с помощью внешних библиотек, которые основаны на идее изменения «схемы», а не полного ее удаления, как Materialize
Вы можете получить что-то не уродливое и работающее с очень небольшими усилиями.
Единственное решение, которое сработало для меня
Граница на самом деле является тенью. Чтобы скрыть это, мне пришлось сделать следующее:
Удаление всех стилей фокуса плохо для специальных возможностей и пользователей клавиатуры в целом. Но контуры уродливы, и создание настраиваемого сфокусированного стиля для каждого отдельного интерактивного элемента может быть настоящей проблемой.
Это не мешает вам писать собственные стили фокуса для некоторых элементов, но, по крайней мере, обеспечивает хорошее значение по умолчанию.
Вот как я это делаю:
Вы можете использовать CSS, чтобы отключить это! Это код, который я использую для отключения синей границы:
Убрать обводку в полях ввода и при кликах на ссылках (input, textarea, focus)
Большинство браузеров при помещении курсора в поле ввода или при клике на ссылку-картинку подсвечивает их рамкой.
Сделано это для того, чтобы пользователи могли осуществлять выбор активных элементов сайта (ссылок, полей ввода, пунктов меню) с помощью клавиши [TAB], и видели какой именно элемент находится в данный момент в фокусе. Все бы хорошо, но у разных браузеров разные рамки для подсветки.
Подсветка картинки в Internet Explorer при клике
Рамка вокруг поля ввода в браузерах Chromium
Рамка в IE и Mozilla Firefox
Такие рамки портят целостность дизайна, поэтому я обычно жертвую этой функцией браузеров в угоду общему дизайну. В общем конечно это не совсем верно с точки зрения юзабилити, но если разобраться хорошенько, то не так уж много пользователей используют для навигации по сайтам только клавиатуру, поэтому я считаю, что можно пренебречь этим “удобством”.
Чтобы убрать рамку, нужно в таблицу стилей вставить следующий код:
Несколько интересных трюков для тега input
2017-11-23 / Вр:14:14 / просмотров: 9921
— убрать обводку при клике на поле формы;
— добавить обводку при наведении мишкой;
— изменить курсор мышки при наведении на input;
— убрать при клике на input текст подсказки;
— вывести данные из input в div (JavaScript);
— проверка поля input на ввод цифр.
Как убрать обводку при клике на input (поле формы)
Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей.
Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:
У вас появится поле формы с текстом « Поиск… ». При клике на поле формы появится обводка.
Обводку можно убрать, если прописать в CSS вот такой код:
Можно поменять и цвет обводки:
Как добавить обводку при наведении мышки на input (поле формы)
Как убрать стандартную обводку при клике на поле формы вы уже знаете, а вот как сделать обводку при наведении на нее мышки, это вы сейчас узнаете.
Достаточно добавить CSS класс к тегу « input »:
И прописать в CSS вот такие стили к классу « bloggood »:
Чтобы форма красиво смотрелась, можно сделать вот так:
Как изменить курсор мышки при наведении на input (поле формы)
Предлагаю вам почитать статью, которая посвящена именно теме «как изменить форму курсора мыши на сайте с помощью CSS», а я только покажу пример.
Как убрать при клике на input текст подсказки
В поле формы есть текст подсказка, например, « Ваше имя », « Ваш телефон », « Поиск… » и т.д.
При клике по форме подсказка исчезает, но если пользователь ничего не ввел, а перешел на другое поле, подсказка вернется. Пример вы можете посмотреть на моем сайте, там, где написано « поиск… »:
Чтобы такое сделать, достаточно вставить код событий в поле input :
Внимание: в коде я написал слово « ТЕКСТ », на его месте вставляете любое свое наименование поля. Только будьте внимательны, текст должен быть прописан с точностью одинаково:
(подробное разъяснение: если указали « Поиск … », то так и пишите! Если сделаете « Поиск » без сохранения троеточия, то код работать не будет.)
Такой эффект можно сделать, если в форме прописано вместо « value » атрибут « placeholder »:
Как вывести данные из input в div (JavaScript)
Проверка поля input на ввод цифр (JavaScript)
Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:
Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4 ):
Все, я думаю этого пока достаточно для вас.
Как убрать обводку у input и textarea в Сафари и Хроме?
Очень просто. В таблице стилей пропишите для input и textarea следущее
А теперь поместим курсор в поле ввода.
Выглядит немного неаккуратно, неправда ли?
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню. 
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана
Как убрать обводку у input и textarea в Сафари и Хроме?: 15 комментариев
Если убрать обводку, то надо предложить что-нибудь в замен. А то будет не понятно, какое поле в фокусе в данный момент (что особенно плохо, когда переключаются через tab).
а кто ж мешает: всего лишь менять класс по focus/blur у «родителя» (КО к вашим услугам). а топик о том, как убрать обводку, а не улучшить удобство =)
Уважаемые подсажите как избавиться от этой проблемы но только в opera?
а в чем проблема? если еще актуально. и какая опера?
Вот спасибо. Отличная статейка. А то млин бился со стилями, и border: none, и border:0px; ничего не помогало. Конечно для просто для inputa прокатывает, а вот для input:hover, нифига.