как убрать выделение формы 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

2017-11-23 / Вр:14:14 / просмотров: 9636

— убрать обводку при клике на поле формы;

— добавить обводку при наведении мишкой;

— изменить курсор мышки при наведении на 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 ):

Все, я думаю этого пока достаточно для вас.

Источник

Формы HTML5: CSS

Убираем стили по умолчанию

Заметьте, что я также сбросил свойства outline и box-shadow чтобы убрать некрасивую голубую подсветку вокруг сфокусированного элемента, и стилизацию поля с ошибкой во всех браузерах.

:focus

Состояние :focus было введено еще в CSS2.1, и оно определяет стиль текущего выбранного элемента

:checked

Стили :checked применяются к выделенным флажкам и переключателям, например:

Не существует селектора :unchecked, но он вам и не нужен: просто создайте стиль для элемента в исходном состоянии, а изменения применяйте при активации состояния :checked. Как альтернативу можно использовать селектор :not(:checked).

:indeterminate

Технически состояние :indeterminate нет в спецификации, но оно там упомянуто. Согласно спецификации, оно представляет собой состояние переключателя или флажка, когда они “и выбраны, и не выбраны” (между двумя состояниями)

Есть несколько ситуаций, когда состояние :indeterminate может быть полезным. Если у вас есть список флажков, вы можете использовать флажок “выбрать все”, который выбирает или снимает выделение со всех флажков по клику. Например, если вы выберите только несколько флажков из списка, то флажок “выбрать все” может перейти в неопределенное (indeterminate) состояние.

:required

Применяет стили к любому элементу, для которого установлен атрибут required, и на момент отправки формы в нем должно содержаться значение.

:optional

Применяет стили к любому полю ввода, у которого нет атрибута required. Я не совсем понимаю, зачем его добавили, если можно использовать селектор :not(:required), который делает то же самое.

:valid

Применяет стили к любому полю, которое содержит верные данные.

:invalid

По аналогии с :valid, :invalid (или :not(:valid)) применяет стили к элементам, которые содержат неверные данные, то есть:

:in-range (числовые поля и слайдеры)

Числовые поля и слайдеры, содержащие числа, значение которых попадает в диапазон, заданный минимумом и максимумом, и соответствующие шагу, могут быть выбраны селектором :in-range. Но, вообще-то, крайне затруднительно вывести слайдер за пределы…

:out-of-range (числовые поля и слайдеры)

:out-of-range выбирает значения, которые находятся вне заданного диапазона значений поля ввода

:disabled

Поля ввода с атрибутом disabled можно выбрать с помощью псевдо-класса :disabled

Запомните, что отключенные поля не будут валидироваться, и их значение не будет отправлено на сервер. Но стили для псевдо-классов :required и :invalid все равно будут применяться и для отключенных элементов.

:enabled

По аналогии, не отключенные поля будут подвержены влиянию стилей для псевдо-классов :enabled (или :not(:disabled)). На практике вам, скорее всего, не придется пользоваться данным селектором, так как он представляет собой стили для обычного состояния полей ввода.

:read-only

Выбрать поля с атрибутом readonly (только для чтения) можно с помощью псевдо-класса :read-only. Запомните, что значения в полях, предназначенных только для чтения, все равно будут проверены и отправлены на сервер, но пользователь не сможет менять их значение.

:read-write

Обычные поля, доступные для редактирования, могут быть выбраны с помощью псевдо-класса :read-write (или :not(:read-only)). В общем, это не тот селектор, который будет часто вам нужен.

:default (только кнопки отправки или поля ввода)

И, наконец, есть селектор :default, который применяет стили к стандартной кнопке отправки формы.

Текстовые стили заполнителей

Атрибут placeholder можно стилизовать с помощью псевдо-элемента ::placeholder с вендорными префиксами (в раздельных правилах), например:

Специфика CSS

Вышеперечисленные селекторы могут применяться одновременно, так что нужно быть осторожными, определяя стили, которые могут быть применены к одному и тому же полю ввода. Представим:

Здесь мы указываем, что в поле с ошибкой текст должен быть красного цвета, но этого никогда не произойдет, потому, что после этого правила мы задали еще одно, где указали, что у включенных элементов текст черного цвета.

Старайтесь использовать простые селекторы, и использовать минимум кода. Например, пустое обязательное (:required) поле будет невалидным (:invalid), так что редко когда нужно стилизовать первое состояние.

Всплывающий блок валидации

При отправке, первое поле с неверным значением будет выделено всплывающим блоком с сообщением.

Его внешний вид отличается в зависимости от устройства и браузера. Только браузеры на движках Webkit/Blink дают возможность стилизовать этот всплывающий блок с помощью не совсем стандартных правил CSS:

Мой вам совет: даже и не пытайтесь это использовать. Если вам нужно собственное форматирование ошибок, то почти всегда вам нужно использовать собственные сообщения об ошибках. Для этого вам понадобится JavaScript.

Поддержка браузерами

Вышеприведенные стили применяются к полям немедленно. Например,

добавит красную границу всем полям с неверными значениями. К сожалению, при первой загрузке страницы многие могут содержать неверные значения, и пользователь будет обескуражен обилием красных прямоугольников.

Мы рассмотрим ближе эти возможности в последней части серии статей.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-css/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 24002
Правила перепечатки

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Источник

Убрать выделение при клике css

-webkit-user-select — вебкит браузеры (Хром, Сафари);

user-select — для браузеров последних версий.

Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.

У кликов мыши есть неприятная особенность.

Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.

Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.

Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.

Способ 1: отмена mousedown/selectstart

Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.

Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.

Полный код элемента, который обрабатывает двойной клик без выделения:

При установке на родителя – все его потомки станут невыделяемыми:

Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.

Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.

Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.

Способ 2: снятие выделения пост-фактум

Вместо предотвращения выделения, можно его снять в обработчике события, после того, как оно уже произошло.

Пример со снятием выделения при двойном клике на элемент списка:

У этого подхода есть две особенности, на которые стоит обратить внимание:

Способ 3: свойство user-select

Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.

Это свойство работает (с префиксом) везде, кроме IE9-:

IE9-: атрибут unselectable=«on»

Он отменяет выделение, но у него есть особенности:

Итого

Для отмены выделения есть несколько способов:

CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).

Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)

Отмена действий на mousedown и selectstart :

Какой же способ выбирать?

Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.

Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?

В любом случае эти способы не предназначены для защиты от выделения-и-копирования.

Если уж хочется запретить копирование – можно использовать событие oncopy :

17 октября 2009 39 Рубрика: HTML&CSS, Важные мелочи

улевойВот иногда бывало время сверстаешь сайт, с иголочки всё, протестишь во всех браузерах (по желанию читаем статью про кроссбраузерность), и всё кажется в ажуре и шоколаде. Но вот в Firefox в глаза попадает следующая вещь – вокруг некоторых ссылок или изображений при клике/выделении появляется уёбищная сволочная неприятная пунктирная рамка, которая портит весь тот самый ажур и шоколад.

Данная вещь существует не только в Firefox, но и в некоторых Internet Explorer’ах. Ну назвать её раздражающей это мало. Однако. Однако убирается она всего лишь одной строкой в CSS:

Однако этот вариант не единственный, хотя бесспорно лучший. Раньше пунктирную рамку можно было убрать при помощи javascript. Для этого каждому тегу ссылки надо было приписать onclick=»this.blur();. Но с приходом CSS2 эта вещь отпала. И к счастью=).

UPD: Недавно использовал плагин jQuery под названием jScroll, который позволяет делать блоки контента на сайте с красивооформленной полосой прокрутки. Так вот, в Firefox и Chrome при клике на тот контейнер (div), на который плагин ставит полосу прокрутки, происходит его выделение в первом случае пунктирной рамкой, а во втором случае жёлтой линией. И чтобы это убрать, недолго думая я всем дивам прописал нулевой оутлайн. И было мне большое счастье=).

Источник