Css input отключить подсветку

Как отключить подсветку выделения текста?

Для якорей, которые действуют как кнопки (например, » Вопросы», » Теги», » Пользователи» и т. Д. В верхней части страницы «Переполнение стека») или вкладок, существует ли стандартный CSS-способ для отключения эффекта выделения, если пользователь случайно выбрал текст?

Я понимаю, что это можно сделать с помощью JavaScript, и небольшое прибегание к поиску принесло только Mozilla -moz-user-select вариант.

Существует ли совместимый со стандартами способ сделать это с помощью CSS, и если нет, то каков подход «наилучшей практики»?

53 ответа

ОБНОВЛЕНИЕ Январь 2017 года:

Согласно я могу использовать, user-select в настоящее время поддерживается во всех браузерах, кроме Internet Explorer 9 и более ранних версий (но, к сожалению, все еще нужен префикс поставщика).

Все правильные варианты CSS:

 
Selectable text.
 
Unselectable text.
 

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

Дополнительную информацию можно найти в документации по Mozilla Developer Network.

В большинстве браузеров это может быть достигнуто с помощью собственных изменений CSS user-select свойство, первоначально предложенное, а затем оставленное в CSS3, а теперь предложенное в CSS UI Level 4:

Для IE unselectable Атрибут элемента, который вы хотите, чтобы быть недоступным для выбора. Вы можете установить это, используя атрибут в HTML:

К сожалению, это свойство не наследуется, то есть вы должны поместить атрибут в начальный тег каждого элемента внутри , Если это проблема, вы можете вместо этого использовать JavaScript, чтобы сделать это рекурсивно для потомков элемента:

function makeUnselectable(node) < if (node.nodeType == 1) < node.setAttribute("unselectable", "on"); >var child = node.firstChild; while (child) < makeUnselectable(child); child = child.nextSibling; >> makeUnselectable(document.getElementById("foo")); 

Обновление от 30 апреля 2014 года. Этот обход дерева необходимо повторять всякий раз, когда в него добавляется новый элемент, но из комментария @Han видно, что этого можно избежать, добавив mousedown обработчик событий, который устанавливает unselectable на цель мероприятия. Смотрите http://jsbin.com/yagekiji/1 для деталей.

Это все еще не охватывает все возможности. Хотя невозможно инициировать выборки в невыбираемых элементах, в некоторых браузерах (например, IE и Firefox) все еще невозможно предотвратить выборки, которые начинаются до и заканчиваются после невыбираемого элемента, не делая весь документ недоступным для выбора.

Пока свойство CSS 3 user-select не станет доступным, браузеры на основе Gecko поддерживают -moz-user-select недвижимость, которую вы уже нашли. Браузеры на базе WebKit и Blink поддерживают -webkit-user-select имущество.

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

Нет никакого простого и простого способа сделать это в соответствии со стандартами; использование JavaScript является опцией.

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

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

Источник

Как сбросить / убрать подсветку входа / границу фокуса? [Дубликат]

Я видел, что хром помещает более толстую рамку на :focus , но в моем случае это выглядит как-то, где я использовал пограничный радиус. Есть ли способ удалить это?

8 ответов

Вы можете удалить его с помощью

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

я изменил background-color и свойства / атрибуты color (как бы вы это ни называли) на :focus так что я думаю, все еще в порядке

Ага. Глобальная настройка outline: none как это делают некоторые операции сброса, не является ошибкой, поскольку ухудшает доступность клавиатуры, но хорошо удалить outline если у вас есть другой четкий способ отражения фокусировки.

+1 на заметку, потому что это ОЧЕНЬ плохая практика. Это сделало бы использование клавиатуры очень раздражающим.

Это ужасная идея от Chrome, но приятно, что их было легко отключить. Конечно, это плохая практика, если вы не делаете что-то еще, чтобы показать фокус, но кто собирается делать что-то глупое? В наши дни это будет хорошо смотреться на 1% веб-сайтов, поскольку все делают все по своему усмотрению. Использование «стандартных» элементов управления осталось в прошлом.

Но для мобильного навигационного меню на основе select выпадающего списка, это очень хорошая практика.

Источник

Подсветка поля input в Chrome

Подсветка у input
При нажатии на поле ввода, оно приобретает своеобразную синюю подсветку. Мне нужно сделать так.

Проверка и подсветка input
Добрый день. Подсвечивает, но подсвечивает только один инпут, если его заполнить — подсвечивает.

Html form подсветка input
Добрый вечер. Что за ерунда происходит с input, когда ставлю курсор туда, вокруг него появляется.

Подсветка кнопки при focus на input поле
Возможно ли сделать чисто на CSS подсветку кнопки, если на рядом стоящий input поставить focus?

_BoGdaN_, вы знаете что обозначает звездочка? Вы предлагаете применить этот стиль ко всем элементам на странице? Не надо так делать.

Egor.V.A, по всей видимости у Вас где-то перекрываются стили — либо просто не подключены, возможна ошибка в написании стилей, если не помогает. А помочь точно должно, ищите ошибку.

Сообщение от mrtoxas

_BoGdaN_, вы знаете что обозначает звездочка? Вы предлагаете применить этот стиль ко всем элементам на странице? Не надо так делать.

mrtoxas, я написал если подсвечивание вовсе не нужно, то есть на всей странице.(Да я знаю, что обозначает звездочка)

_BoGdaN_, подсветку нужно отключить только у текстовых полей, поэтому не обязательно применять данное правило ко всем элементам. Это то, что хотел донести до Вашего внимания mrtoxas, за сим вопрос исчерпан.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

*{margin:0; padding:0; img: border: none;} /* Сброс настроек по умолчанию */ body {background: #f2f2f2;} /* Цвет фона*/ .main { background: #ffffff; /* Цвет фона */ min-width: 1000px; /* Ширина */ max-width: 1100px; margin: 0 auto; /* Выравнивание по центру */ } .header {overflow: hidden;} /* Отображение внутренней области */ .logo { float: left; /* Выравнивание по левому краю картинки логотипа*/ margin: 5px 0 0 35px; /* Внешние отступы картинки логотипа */ } .slogan {margin: 40px 0 6px 30px;} /* Отступы картинки слогана */ .head-contact { float: right; /* Выравнивание по правому краю */ background: #f8fafb url(../images/phone-clock.gif) 253px 12px no-repeat; /* Цвет фона + картинка*/ border: 2px solid #e8eff4; /* Цвет рамки*/ border-radius: 0 0 10px 10px; /* Закругление углов блока */ text-align: right; /* Выравнивание текста по правому краю */ margin: 0 7px 0 0; /* Внешние отступы */ padding: 10px 65px 10px 14px; /* Внутренние отступы */ } .head-contact p { font: normal 12px/1.3 Verdana; margin: 0 0 3px 0; } .head-contact p strong { font-size: 14px; font-weight: 100; } .head-contact p span { font-size: 21px; font-weight: 900; } .searh-head { float: right; background: url(../images/bg-search.gif) no-repeat left top; width: 305px; height: 29px; margin: 7px 7px 0 0; } #quickquery { border: none; margin: 5px 5px 5px 8px; width: 225px; font-size: 12px; outline: none; } #quickquery:visited { border: none; } .search-btn {margin: 8px 0 0 15px;}

Источник

Подсветка инпута при клике

как реализовано это в бутстрапе? какое свойство или псевдоселектор отвечает за свечение инпута при клике?
можно ли без бутстрапа реализовать подобное свечение инпута? если да — то как?

При фокусе инпута дать стиль диву
Как сделать чтобы при фокусе инпута менялся бордер у блока с иконкой? <!DOCTYPE html> <html.

Убрать выделение ИНПУТа при выборе из списка
Стандартные механизмы браузеров при выборе в Input значения из списка вводимых ранее подсвечивают.

При увеличении картинки при клике, поверх страницы оказывается не вся картинка
Добрый день! На странице https://mosmassage.ru/ru/rezume/massagists/hristichvv/ размещены.

При наведении курсора, ячейка должна окрашиваться в красный цвет, а при клике — в синий
При наведении курсора, ячейка должна окрашиваться в красный цвет, а при клике — в синий, но этого.

form input[type='text']:focus { border:1px solid blue; box-shadow:0 0 7px blue; }

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

.form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); }

Источник

Несколько интересных трюков для тега input

В сегодняшней статье я расскажу и покажу парочку трюков, которые можно использовать для тега input .
Не терпится узнать, какие это трюки?

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

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

— изменить курсор мышки при наведении на input;

— убрать при клике на input текст подсказки;

— вывести данные из input в div (JavaScript);

— проверка поля input на ввод цифр.

Как убрать обводку при клике на input (поле формы)

Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей.

Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:

У вас появится поле формы с текстом « Поиск… ». При клике на поле формы появится обводка.
Обводку можно убрать, если прописать в CSS вот такой код:

Можно поменять и цвет обводки:

Как добавить обводку при наведении мышки на input (поле формы)

Как убрать стандартную обводку при клике на поле формы вы уже знаете, а вот как сделать обводку при наведении на нее мышки, это вы сейчас узнаете.

Достаточно добавить CSS класс к тегу « input »:

И прописать в CSS вот такие стили к классу « bloggood »:

Чтобы форма красиво смотрелась, можно сделать вот так:

Как изменить курсор мышки при наведении на input (поле формы)

Предлагаю вам почитать статью, которая посвящена именно теме «как изменить форму курсора мыши на сайте с помощью CSS», а я только покажу пример.

Как убрать при клике на input текст подсказки

В поле формы есть текст подсказка, например, « Ваше имя », « Ваш телефон », « Поиск… » и т.д.
При клике по форме подсказка исчезает, но если пользователь ничего не ввел, а перешел на другое поле, подсказка вернется. Пример вы можете посмотреть на моем сайте, там, где написано « поиск… »:

Чтобы такое сделать, достаточно вставить код событий в поле input :

value="ТЕКСТ" onfocus="if (value == 'ТЕКСТ') " onblur="if (value == '') "

Внимание: в коде я написал слово « ТЕКСТ », на его месте вставляете любое свое наименование поля. Только будьте внимательны, текст должен быть прописан с точностью одинаково:

(подробное разъяснение: если указали « Поиск … », то так и пишите! Если сделаете « Поиск » без сохранения троеточия, то код работать не будет.)

Такой эффект можно сделать, если в форме прописано вместо « value » атрибут « placeholder »:

Как вывести данные из input в div (JavaScript)

В чем фишка? Фишка в том, что весь текст, который вы будете писать в поле input , сразу будет отображаться в блоке div с классом « result » без перезагрузки браузера, то есть в реальном времени.
Код нужно вставлять в таком порядке, как я вам скинул:

Проверка поля input на ввод цифр (JavaScript)

Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:

Строка №4: «-\.;,»:’a-zA-Zа-яА-Я» — это символы, которые вы хотите запретить для ввода в поле input. Список можете продолжить, если нужно.

Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4 ):

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

Источник