Как убрать border у input
Убрать обводку в полях ввода и при кликах на ссылках (input, textarea, focus)
Большинство браузеров при помещении курсора в поле ввода или при клике на ссылку-картинку подсвечивает их рамкой.
Сделано это для того, чтобы пользователи могли осуществлять выбор активных элементов сайта (ссылок, полей ввода, пунктов меню) с помощью клавиши [TAB], и видели какой именно элемент находится в данный момент в фокусе. Все бы хорошо, но у разных браузеров разные рамки для подсветки.
Подсветка картинки в Internet Explorer при клике
Рамка вокруг поля ввода в браузерах Chromium
Рамка в IE и Mozilla Firefox
Такие рамки портят целостность дизайна, поэтому я обычно жертвую этой функцией браузеров в угоду общему дизайну. В общем конечно это не совсем верно с точки зрения юзабилити, но если разобраться хорошенько, то не так уж много пользователей используют для навигации по сайтам только клавиатуру, поэтому я считаю, что можно пренебречь этим “удобством”.
Чтобы убрать рамку, нужно в таблицу стилей вставить следующий код:
Как убрать обводку при клике на input
При клике и фокусе на input появляется обводка. Как её убрать?
9 ответов 9
Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.
Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap
У меня была такая проблема. Я просто сделал так:
Примените свойство outline:none
Конкретно для input и конкретно при фокусе на нем:
Проверял на Chrome.
Попробуйте поставить box-shadow: none;
Допишите также onFocus=»this.blur()»
Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.
Несколько интересных трюков для тега input
2017-11-23 / Вр:14:14 / просмотров: 9901
— убрать обводку при клике на поле формы;
— добавить обводку при наведении мишкой;
— изменить курсор мышки при наведении на 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 ):
Все, я думаю этого пока достаточно для вас.
Как убрать выделение границы на элементе ввода текста
Когда элемент HTML «сфокусирован» (в данный момент выбран / вставлен вкладкой), многие браузеры (по крайней мере, Safari и Chrome) будут помещать вокруг него синюю рамку.
В макете, над которым я работаю, это отвлекает и выглядит некорректно.
Firefox, похоже, не делает этого или, по крайней мере, позволяет мне контролировать это с помощью:
Если бы кто-нибудь мог сказать мне, как работает IE, мне было бы любопытно.
Было бы неплохо заставить Safari удалить эту небольшую засветку.
19 ответов
В вашем случае попробуйте:
Или вообще, чтобы повлиять на все основные элементы формы:
В комментариях Ной Уитмор предложил пойти еще дальше, чтобы поддержать элементы, для которых для атрибута contenteditable установлено значение true (фактически делая их типом элемента ввода). Следующее должно быть нацелено и на них (в браузерах с поддержкой CSS3):
Хотя я бы не рекомендовал это для полноты картины, вы всегда можете отключить контур фокуса для всего следующим образом:
Чтобы удалить его со всех входов
Это старый поток, но для справки важно отметить, что отключение контура элемента ввода не рекомендуется, поскольку это затрудняет доступность.
Это сбивало меня с толку в течение некоторого времени, пока я не обнаружил, что линия не была ни границей, ни контуром, это была тень. Итак, чтобы удалить его, мне пришлось использовать это:
Это общая проблема.
схема по умолчанию, отображаемая браузерами, ужасна.
Смотрите это, например:
Я нашел очень сухой веб-сайт, который хорошо все объясняет.
Он обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» при навигации по веб-документу с помощью клавиши TAB (или ее эквивалента). Это особенно полезно для людей, которые не могут пользоваться мышью или имеют нарушения зрения. Если вы удалите схему, вы сделаете свой сайт недоступным для этих людей.
Хорошо, давайте попробуем тот же пример, что и выше, теперь используйте клавишу TAB для навигации.
Обратите внимание, как вы можете определить, где находится фокус, даже не щелкнув поле ввода?
А теперь давайте попробуем outline:none на нашем надежном
Итак, еще раз, используйте клавишу TAB для навигации после щелчка по тексту и посмотрите, что произойдет.
Теперь сравните это с тем же шаблоном, если мы сохраним схему:
Итак, мы установили следующие
Итак, каков ответ?
Удалите уродливые очертания и добавьте собственные визуальные подсказки, указывающие на фокус.
Вот очень простой пример того, что я имею в виду.
Я удаляю контур и добавляю нижнюю границу на : focus и : active. Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, установив их прозрачными на : focus и : active (личные предпочтения )
Итак, мы пробуем описанный выше подход на нашем «реальном» примере из более раннего:
Это можно расширить с помощью внешних библиотек, которые основаны на идее изменения «схемы», а не полного ее удаления, как Materialize
Вы можете получить что-то не уродливое и работающее с очень небольшими усилиями.
Единственное решение, которое сработало для меня
Граница на самом деле является тенью. Чтобы скрыть это, мне пришлось сделать следующее:
Удаление всех стилей фокуса плохо для специальных возможностей и пользователей клавиатуры в целом. Но контуры уродливы, и создание настраиваемого сфокусированного стиля для каждого отдельного интерактивного элемента может быть настоящей проблемой.
Это не мешает вам писать собственные стили фокуса для некоторых элементов, но, по крайней мере, обеспечивает хорошее значение по умолчанию.
Вот как я это делаю:
Вы можете использовать CSS, чтобы отключить это! Это код, который я использую для отключения синей границы:
Стилизация текстовых полей формы
В этой статье рассмотрим различные варианты стилизации текстовых полей HTML-форм. Сначала создадим базовый вариант оформления input, а затем множество других, дополняя каждый из них небольшим количеством CSS.
Введение
Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.
Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».
Нормализация стилей
Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box :
В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.
Для того чтобы в разных браузерах отображался как можно более одинаково необходимо добавить следующее:
Базовый вариант оформления input
Для удобного добавления к элементам стилей создадим следующую HTML-разметку:
Теперь напишем стили для этих элементов. А также сразу включим в них стили для нормализации, чтобы не добавлять их отдельно:
В результате получили следующее оформление:
Стили для в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus ):
Этот набор стилей будет у нас отправной точкой для создания других.
input с иконкой
Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.
Для этого дополнительно обернём элемент в
Ещё один вариант оформления:
input с активной svg-иконкой
В этом примере поместим в input иконку, на которую можно нажать.
Для этого мы также как и в предыдущем примере обернули в
Оформление выполнили так:
Ещё пример вставки иконки в input :
input с кнопкой
HTML-разметка input с кнопкой:
Расположение кнопки справа от input выполним с помощью флексов:
input с плавающим label
Разметка input с плавающим label:
Ещё один вариант с «плавающей» меткой:
input со счётчиком символов
Пример в котором под input отображается количество набранных символов и максимальная длина:
Это выполняется посредством следующего кода:
Стили для отображения состояния валидации input
Отображать сообщения пользователю или подсказки можно через
Пример валидации формы с помощью JavaScript
Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу
Клиентская проверка формы после нажатия «Отправить»: