Как убрать обводку при клике на input
При клике и фокусе на элементе input появляется обводка. Как её убрать?
10 ответов 10
Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.
Универсальное решение, которое убирает подсветку во всех браузерах и не только на input , но и на других элементах, в том числе select , button , a :
Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap
У меня была такая проблема. Я просто сделал так:
Примените свойство outline:none
Для получения симпатичного белого поля для ввода используйте свойства border и outline . Дополнительно рекомендую border-radius
Конкретно для input и конкретно при фокусе на нем:
Проверял на Chrome.
Если используете Bootstrap, то, возможно, используется box-shadow .
Попробуйте поставить box-shadow: none;
Допишите также onFocus=»this.blur()»
Физически обводку убрать никак нельзя, браузер сам ее рисует. Фактически ее можно свернуть в точку, если у элемента A будет стиль не display:block , а display:inline . При этом на активную область это не повлияет, но это плохой вариант.
Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.
Как убрать браузерную обводку у кнопок (появляющуюся в состоянии :focus) в Chrome и Firefox?
*Аналогичная ситуация (если хотим эту браузерную обводку убрать) в случае с ссылками и инпутами решается с помощью css-стиля:
Однако в случае именно с кнопками (button) — просто применение стиля :focus не помогает.
Что делать, чтобы убрать браузерную обводку у кнопок (появляющуюся в состоянии :focus ) в Chrome и Firefox?
(*в jsfiddle при клике на кнопку в фаерфоксе — почему-то нежелательная пунктирная обводка не отображается, хотя на самом деле она есть)
Как убрать браузерную обводку у различных элементов в состоянии :focus
Верстка
В данной коротенькой статье, приведу готовое решение по тому как убрать браузерную обводку у button, input, textarea, checkbox и прочих элементов верстки появляющуюся в состоянии :focus в различных браузерах: mozilla, google chrome.
Несколько интересных трюков для тега input
В сегодняшней статье я расскажу и покажу парочку трюков, которые можно использовать для тега input .
Не терпится узнать, какие это трюки?
— убрать обводку при клике на поле формы;
— добавить обводку при наведении мишкой;
— изменить курсор мышки при наведении на input;
— убрать при клике на input текст подсказки;
— вывести данные из input в div (JavaScript);
— проверка поля input на ввод цифр.
Как убрать обводку при клике на input (поле формы)
Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей.
Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:
У вас появится поле формы с текстом « Поиск… ». При клике на поле формы появится обводка.
Обводку можно убрать, если прописать в CSS вот такой код:
Можно поменять и цвет обводки:
Как добавить обводку при наведении мышки на input (поле формы)
Как убрать стандартную обводку при клике на поле формы вы уже знаете, а вот как сделать обводку при наведении на нее мышки, это вы сейчас узнаете.
Достаточно добавить CSS класс к тегу « input »:
И прописать в CSS вот такие стили к классу « bloggood »:
Чтобы форма красиво смотрелась, можно сделать вот так:
Как изменить курсор мышки при наведении на input (поле формы)
Предлагаю вам почитать статью, которая посвящена именно теме «как изменить форму курсора мыши на сайте с помощью CSS», а я только покажу пример.
Как убрать при клике на input текст подсказки
В поле формы есть текст подсказка, например, « Ваше имя », « Ваш телефон », « Поиск… » и т.д.
При клике по форме подсказка исчезает, но если пользователь ничего не ввел, а перешел на другое поле, подсказка вернется. Пример вы можете посмотреть на моем сайте, там, где написано « поиск… »:
Чтобы такое сделать, достаточно вставить код событий в поле input :
Внимание: в коде я написал слово « ТЕКСТ », на его месте вставляете любое свое наименование поля. Только будьте внимательны, текст должен быть прописан с точностью одинаково:
(подробное разъяснение: если указали « Поиск … », то так и пишите! Если сделаете « Поиск » без сохранения троеточия, то код работать не будет.)
Такой эффект можно сделать, если в форме прописано вместо « value » атрибут « placeholder »:
Как вывести данные из input в div (JavaScript)
В чем фишка? Фишка в том, что весь текст, который вы будете писать в поле input , сразу будет отображаться в блоке div с классом « result » без перезагрузки браузера, то есть в реальном времени.
Код нужно вставлять в таком порядке, как я вам скинул:
Проверка поля input на ввод цифр (JavaScript)
Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:
Строка №4: «-\.;,»:’a-zA-Zа-яА-Я» — это символы, которые вы хотите запретить для ввода в поле input. Список можете продолжить, если нужно.
Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4 ):