Как менять цвет placeholder-a через javascript?
Всем привет! У меня есть инпут, как я могу поменять цвет placeholder-a при на фокусе на input? Сделать примерно как при входе ВКонтакте. То есть, если есть наведение на инпут, placeholder становится более прозрачным, ну или цвет более можно сделать ярким.
Узнал что можно вот так прописать в стилях:
.login::placeholder
Но тут у меня проблемы: Я всегда решал задачки через classList.add, заранее прописывая класс со стилями в файле style.css, где хранились все мои стили. Добвавлялось все просто, типо add(‘active’) и т.д. Но сейчас возникла проблема, не знаю как работать в javascript-e c псевдо-классами. Есть ли какое-то решение? Кто сталкивался?
Как изменить цвет текста в placeholder css
Если требуется полностью изменить цвет или шрифт подсказки placeholder, то подойдет свойство ::placeholder, но в случаях когда нужны разные стили в одной подсказке он не поможет. Возможны альтернативы:
Атрибут required и псевдокласс invalid
При добавлении атрибута required к полю формы , начинает работать псевдокласс :invalid , который действует если поле не заполнено. Так работает первый вариант:
Изменение цвета заполнителя ввода HTML5 с помощью CSS
Chrome поддерживает атрибут placeholder on input[type=text] элементы (другие, вероятно, тоже).
а после CSS ничего не делает со значением заполнителя:
Value останется grey вместо red .
есть ли способ изменить цвет текста-заполнителя?
30 ответов
реализация
существуют три различные реализации: псевдо-элементы, псевдо-классы и ничего.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Edge используют псевдо-элемент: ::-webkit-input-placeholder . [Ref]
- Mozilla Firefox 4 до 18 использует псевдо-класс: :-moz-placeholder (один Колон). [Ref]
- Mozilla Firefox 19+ использует псевдо-элемент: ::-moz-placeholder , но старый селектор все равно будет работать некоторое время. [ Ref]
- Internet Explorer 10 и 11 используют псевдокласс: :-ms-input-placeholder . [Ref]
- апреля 2017 года: большинство современных браузеров поддерживают простой псевдо-элемент ::placeholder [Ref]
Internet Explorer 9 и ниже не поддерживает , а Opera 12 и ниже не поддерживают любой селектор CSS для заполнителей.
дискуссия о лучшей реализации все еще продолжается. Обратите внимание, что псевдо-элементы действуют как реальные элементы в Shadow DOM. А padding на input не получит тот же цвет фона, что и псевдо-элемент.
селекторы CSS
агенты пользователей должны игнорировать правило с неизвестным селектора. См.Селекторы Уровня 3:
a группа селекторов, содержащих недопустимый селектор, недопустим.
Итак, нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет проигнорирована всеми браузерами.
Примечания
- будьте осторожны, чтобы избежать неприятных контрастов. Заполнитель Firefox, похоже, по умолчанию с уменьшенной непрозрачностью, поэтому необходимо использовать opacity: 1 здесь.
- обратите внимание, что текст заполнителя просто отрезается, если он не подходит – размер ваших входных элементов в em и проверить их с большими настройками минимального размера шрифта. Не забудьте переводы: некоторые языки нужно больше места для того же слова.
- браузеры с поддержкой HTML для placeholder но без поддержки CSS для этого (например, Opera) также следует протестировать.
- некоторые браузеры используют дополнительный CSS по умолчанию для некоторых input типы ( email , search ). Они могут повлиять на рендеринг неожиданными способами. Используйте свойства -webkit-appearance и -moz-appearance изменить. Пример:
это будет стиль все input и textarea заполнители.
Важное Замечание: не группируйте эти правила. Вместо этого создайте отдельное правило для каждого селектора (один недопустимый селектор в группе делает всю группу недопустимой).
Как изменить цвет текста в placeholder css
Изменение цвета заполнителя HTML5 с помощью CSS
- 1
- 1
- 2
- WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Edge используют псевдоэлемент: ::-webkit-input-placeholder . [Ref]
- Mozilla Firefox с 4 по 18 использует псевдокласс: :-moz-placeholder (один двоеточие). [Ref]
- Mozilla Firefox 19+ использует псевдоэлемент: ::-moz-placeholder , но старый селектор будет работать некоторое время. [Ref]
- В Internet Explorer 10 и 11 используется псевдокласс: :-ms-input-placeholder . [Ref]
- Апрель 2017: Большинство современных браузеров поддерживают простой псевдоэлемент ::placeholder [Ref]
Как поменять цвет placeholder input. Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS
- Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
- Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
- Темы Drupal /sites/all/themes/themeXXX/css/style.css
- Шаблоны Web (HTML5) /css/style.css
Шаблоны E-commerce:
- Темы Magento /skin/frontend /default/themeXXX/css/styles.css
- Темы PrestaShop /themes/themeXXXX/css/global.css
- Темы OpenCart /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
- Темы ZenCart /includes/templates/themeXXX/css/stylesheet .css
- Шаблоны osCommerce /css/stylesheet .css
- Шаблоны Shopify style.css.liquid
- изменение стиля плейсхолдера;
- скрытие сразу при нажатии на поле;
- отображение в браузерах, которые не поддерживают атрибут.
Изменение цвета placeholder
Input-1::-webkit-input-placeholder < color:red; >.input-2::-webkit-input-placeholder < color:green; >. и.т.д.
Убираем placeholder при нажатии на поле
:focus::-webkit-input-placeholder /* webkit */ :focus::-moz-placeholder /* Firefox 19+ */ :focus:-moz-placeholder /* Firefox 18- */ :focus:-ms-input-placeholder /* IE */
Кроссбраузерность placeholder
Изменяем вид placeholder посредством css
::-webkit-input-placeholder < color: #c1c1c1; >::-moz-placeholder < color: #c1c1c1; >/* Firefox 19+ */ :-moz-placeholder < color: #c1c1c1; >/* Firefox 18- */ :-ms-input-placeholder
:focus::-webkit-input-placeholder < color: transparent; >:focus::-moz-placeholder < color: transparent; >:focus:-moz-placeholder < color: transparent; >:focus:-ms-input-placeholder
Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS
::-webkit-input-placeholder < color: #c1c1c1; >::-moz-placeholder < color: #c1c1c1; >/* Firefox 19+ */ :-moz-placeholder < color: #c1c1c1; >/* Firefox 18- */ :-ms-input-placeholder
:focus::-webkit-input-placeholder < color: transparent; >:focus::-moz-placeholder < color: transparent; >:focus:-moz-placeholder < color: transparent; >:focus:-ms-input-placeholder
Как изменить цвет текста в placeholder css
Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.
Итак, начнем с примера для тех, кто не знает, что такое placeholder.
Стиль placeholder-a можно изменить с помощью такого набора css правил:
Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.
В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.
Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:
- font (и сопутствующие свойства)
- background (и сопутствующие свойства)
- color
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- text-overflow
- opacity
А если placeholder не вмещается?
Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.
Как скрыть placeholder при фокусе?
Скрывание placeholder-а происходит по-разному.
- в некоторых браузерах при получении фокуса инпутом
- в других браузерах при наличии хотя бы одного введенного символа
Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:
Похожие публикации:
- Как сделать два элемента в одну строку css
- Как сделать из ссылки кнопку в css
- Как сделать картинку на задний фон в css
- Как сделать кнопки в css
Как сделать заполнитель для поля в HTML
Теперь давайте посмотрим следующий пример, чтобы понять, как он работает:
Make Placeholder for Select Box select:invalid < color: gray; >option Атрибут hidden не поддерживается в Internet Explorer 10 и ниже. Если вам нужно поддерживать IE10 и ниже, вы также можете использовать CSS option[disabled] < display: none; >.
Читайте также
Похожие примеры:
- Как изменить цвет текста поля ввода с помощью CSS
- Как расширить поле выбора до ширины по умолчанию при фокусе с помощью CSS
- Как изменить цвет выделения текста по умолчанию в браузерах с помощью CSS
color
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
Явление культурологического порядка mezzo forte вызывает неизменный микрохроматический интервал. Эти слова совершенно справедливы, однако октавер неизменяем. Легато использует нечётный динамический эллипсис. Кластерное вибрато выстраивает неизменный пласт.
Звукоряд, как бы это ни казалось парадоксальным, неравномерен. Развивая эту тему, пентатоника имеет midi-контроллер. Алеаторика просветляет зеркальный флажолет. Векторно-зеркальная синхронность свободна. Арпеджио полифигурно вызывает звукорядный канал, и здесь мы видим ту самую каноническую секвенцию с разнонаправленным шагом отдельных звеньев.
Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства color
Объектная модель
Объект.style.color
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Transitions | Рабочий проект |
| CSS Color Module Level 3 | Рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 3 | 12 | 1 | 3.5 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- currentColor
- text-fill-color
- Атрибут link
- Единицы цвета в CSS
- Наследование в CSS
- Работа с типографикой