Изменить цвет placeholder: Цвет замещающего текста | htmlbook.ru

Содержание

Как изменить цвет placeholder css

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.

Напомню, по статистике в Рунете устаревшими браузерами пользуется около 5% пользователей (это для очистки совести, если что). Надеюсь на ваших сайтах они не концентрируются)

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

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

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

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

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

Убираем placeholder при нажатии на поле

По умолчанию в браузерах текст из атрибута placeholder пропадает только после начала ввода, но есть и такие, кто хочет, чтобы этот текст не отвлекал уже на стадии нажатия на поле ввода. Чаще всего делают именно так. Для это нужна написать стили для фокуса, где цвет текста-подсказки станет полностью прозрачным, то есть его перестанет быть видно.

Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

Ну точно не теряться) Да, действительно, такие браузеры есть. Например, IE8. И да, есть люди-адепты, которые будут им пользоваться всегда. Если нужна составить решение для всех посетителей, то наберитесь ещё немного терпения.

Для решения этой проблемы скачайте популярный для этого jquery плагин — jquery.placeholder. Ссылок давать не буду, так как сегодня-завтра они изменятся. Но, если что, можете скачать рабочий пример с плагином в — скачать исходники.

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Что такое placeholder (плейсхолдер)? Это английское слово переводится как заполнитель. Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п. ), в виде атрибута.

На данный момент поддерживается всеми современными браузерами. Ранее работа эмулировалась с помощью JavaScript. Элемент доказал свою пользу и разработчики браузеров ввели дополнительные свойства, позволяющие стилизовать «заполнитель» под свой дизайн.

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

До сих пор нет единого мнения, является ли селектор выбора плейсхолдера псевдоклассом или псевдоэлементом. Браузеры на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:, обозреватели Internet Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.

К счастью, устаревшие браузеры довольно оперативно заменяются новыми версиями — Chrome и Firefox с ускоренным циклом разработки «дисциплинировали» пользователей.

Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать с помощью JavaScript.

Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.

Как обычно выглядит форма:

Пример с плейсхолдером:

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

Изменяем вид placeholder посредством css

Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):

Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

Задача: сделать свой css стиль для placeholder

Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

Решение: css стиль для placeholder

Итак, задачу мы поставили, как же будем её решать?

Сначала сделаем полигон для тестирования:

Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:

Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на

Placeholder — псевдокласс или псевдоэлемент, который отвечает за вывод названия поля. По своей сути это тот тег (назовем его так для простоты) в который вы вписываете слово, а пользователь видит его внутри. Некое подобие подсказки или названия для каждого поля формы.

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

Среди всего многообразия стилей, в данном случае нам доступны следующие вещи:

font-weight — установка жирности текста
font-size — выбор размера текста
font-family — выбор шрифта
background — фон и фоновое изображение
color — цвет текста
word-spacing — установка интервала между словами
letter-spacing — установка интервала между буквами
text-decoration — выбор украшения слов. Подчеркнутый, зачеркнутый и тд
vertical-align — установка вертикального выравнивания
text-transform — выбор изменения текста. Все заглавными или строчными буквами и тд
line-height — интервал между строками
text-indent — устанавливает отступ по левому краю у первой строки параграфа
text-overflow — выбор отображения текста, который не умещается в блоке (скрыть или обрезать и добавить многоточие)
opacity — выбор прозрачности элемента

Теперь, когда мы разобрались в доступных стилях, можно приступить к оформлению, для этого добавим следующие стили:

::-webkit-input-placeholder
::-moz-placeholder /* Firefox 19+ */
:-moz-placeholder /*Firefox 18- */
:-ms-input-placeholder

После добавления этих строк, изменится цвет названий внутри полей формы и в каждом браузере он будет одинаковый. Тут же можно дописать дополнительные стили.
К примеру вот такой стиль

Добавит цвет, большой размер и среднюю жирность текста. Если добавить дополнительное свойство —
text-overflow:ellipsis то текст будет обрезаться по размеру поля, в конце будет добавлено многоточие.

Есть еще одно интересное свойство, благодаря появлению анимации в css (стилях) можно настроить красивое скрытие при установке курсора в поле. Раньше это делалось черз js (скрипты)

Добавление таких стилей позволит сделать плавное исчезновение placeholder-a при установки курсора в поле
.input — это класс элемента формы. Для того чтобы стили сработали, код поля формы должен выглядить так:

Или можно использовать класс элемента. Таким образом можно задавать разные стили для каждой формы.

Вот такими нехитрыми способами можно сделать действительно красивое оформление формы.

Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения.

У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

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

Для примера возьмём текстовое поле input и будем применять к нему стили.

Изменение цвета placeholder

Браузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

Input-1::-webkit-input-placeholder .input-2::-webkit-input-placeholder . и.т.д.

Убираем placeholder при нажатии на поле

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

:focus::-webkit-input-placeholder 0>0>0>0>

«»—«»

«»

«»«»«»«»

«»

—«»

—

«»
—
—
—
—
—
—
—
—
—
—
—
—
—
—
как изменить цвет placeholder
Цвет замещающего текста
В HTML5 к полям формы добавлен атрибут placeholder , который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.
Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы, как показано в примере 1.
Пример 1. Использование placeholder
HTML5 CSS 2.1 IE Cr Op Sa Fx
Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder .
В Safari и Chrome стиль текста меняется следующим образом.
Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).
Пример 2. Цвет текста
HTML5 CSS3 IE Cr Op Sa Fx
Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.
Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.
Css placeholder color или как изменить цвет placeholder css
Доброго времени, коллеги! Бывало ли у вас такое, что заказчик говорит что плохо виден текст в полях для заполнения формы? Более того, кто ведет свои блоги, знает, что цвет текста в input в комментариях всегда какой-то нечитаемый, блеклый, а браузер Mozilla и вовсе его «размазывает».
Css placeholder color
И поэтому сегодня, мы рассмотрим такой вопрос как изменить цвет placeholder при помощи css. Как по мне, решение внизу лучшее так как оно более валидно и не требует особых знаний в css, к тому же, добавить свой color к placeholder сможет каждый.
HTML: стандартная конструкция
Префиксы
Для всех современных браузеров достаточно использовать такую конструкцию.
Но если делаете проект на заказ, то рекомендую добавить еще несколько строк. Важно: не объединяйте эти стили вместе с вашими, уже существующими, а прописывайте так как они есть в примере ниже.
Зачем столько кода, спросите вы! Много не мало! А если кроме шуток, то на данный момент этого еще нет в стандартах, и поэтому, в каждом браузере поддержка стилизации placeholder реализована по-своему.
Читайте также:
Трюк: изменение прозрачности
Вообще, существует несколько фишек по стилизации и «анимации» placeholder’а, но если есть необходимость чтобы проект прошел проверку на валидность, то не стоит такими фишками баловаться.
Плагин
А если уж совсем хочется или возможно требуется в разработке проекта, то обратите внимание на плагин по ссылке ниже. Он добавляет к полю лишь label имитируя плейсхолдер, который однозначно можно кастомизировать как душе угодно. Больше того, это даже будет работать в сафари, черт его побери…
Документация и демо
Пример на Codepen
На сегодня сеанс окончен, до встречи в следующей статье! Не делайте гуано-сайтов, не надо!
Оформление placeholder с помощью CSS стилей
У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:
изменение стиля плейсхолдера;
скрытие сразу при нажатии на поле;
отображение в браузерах, которые не поддерживают атрибут.
Для примера возьмём текстовое поле input и будем применять к нему стили.
Изменение цвета placeholder
Браузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.
Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.
Убираем placeholder при нажатии на поле
По-умолчанию браузеры скрывают плейсхолдер только после начала ввода текста. Но не сложно сделать чтобы он ичезал сразу после установки курсора в поле ввода. Для этого для полей с фокусом напишем стиль, в котором сделаем подсказку полностью прозрачной.
Скрывать плейсхолдер при форкусе можно по разному, например, плавно изменяя прозрачность или цвет. А можно настроить и css анимацию, когда подсказка будет плавно уезжать за пределы поля. Всё это возможно благодаря CSS, но большого смысла я в этом не вижу, так как кроссбраузерность таких прелестей будет страдать, а пользы от этих эффектов практически никакой.
Кроссбраузерность placeholder
Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.
Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.
Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:
Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.
Оформление placeholder css. Внешний вид названия полей или как изменить placeholder. Скрываем placeholder красиво
placeholder=»текст-подсказка» >
Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения.
Плохо
Хорошо
Стилизация: изменить цвет placeholder CSS
Поменять стиль поля ввода с placeholder CSS
Плохо
Эффект placeholder для
Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable .
Древний метод на память, изменяющий value JavaScript
Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.
Задача: сделать свой css стиль для placeholder
Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.
Решение: css стиль для placeholder
Итак, задачу мы поставили, как же будем её решать?
Сначала сделаем полигон для тестирования:
Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:
Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

Input{ width: 250px; color: blue; font-weight: normal; font-style: normal; }
Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):
Input::-webkit-input-placeholder{ color: red; font-style: italic; font-weight: bold; }
Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.
Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

Input:-moz-placeholder{ color: red; font-style: italic; font-weight: bold; }
Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder . Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис

Селектор ::placeholder { … }

Обозначения

	Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	{1,4}
#	Повторять один или больше раз через запятую.	#

Пример

placeholder

Результат примера показан на рис. 1.

Рис. 1. Использование::placeholder

Примечание

Internet Explorer использует псевдокласс :-ms-input-placeholder .

Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .

Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .

Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .

Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Браузеры

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

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

Input-phone::-webkit-input-placeholder { color:red; }
. input-text::-webkit-input-placeholder { color:green; }
/* и так далее… */

Убираем placeholder при нажатии на поле

:focus::-webkit-input-placeholder {opacity:0;}/* webkit */
:focus::-moz-placeholder {opacity:0;}/* Firefox 19+ */
:focus:-moz-placeholder {opacity:0;}/* Firefox 18- */
:focus:-ms-input-placeholder {opacity:0;}/* IE */

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Среди всего многообразия стилей, в данном случае нам доступны следующие вещи:

font-weight — установка жирности текста
font-size — выбор размера текста
font-family — выбор шрифта
background — фон и фоновое изображение
color — цвет текста
word-spacing — установка интервала между словами

letter-spacing — установка интервала между буквами
text-decoration — выбор украшения слов. Подчеркнутый, зачеркнутый и тд
vertical-align — установка вертикального выравнивания
text-transform — выбор изменения текста. Все заглавными или строчными буквами и тд
line-height — интервал между строками
text-indent — устанавливает отступ по левому краю у первой строки параграфа
text-overflow — выбор отображения текста, который не умещается в блоке (скрыть или обрезать и добавить многоточие)
opacity — выбор прозрачности элемента

::-webkit-input-placeholder { color: #2cb04d; }

::-moz-placeholder { color: #2cb04d; }/* Firefox 19+ */
:-moz-placeholder { color: #2cb04d; } /*Firefox 18- */
:-ms-input-placeholder { color: #2cb04d; }

::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}
::-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 19+*/
:-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 18-*/

:-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}

Input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:-moz-placeholder {opacity: 1; transition: opacity 0.

3s ease;}
.input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}

Или можно использовать класс элемента. Таким образом можно задавать разные стили для каждой формы.

.contacts-form form input::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}
.contacts-form form input::-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 19+*/
.contacts-form form input:-moz-placeholder {color: #2cb04d; font-size: 1. 5em; font-weight: 600;}/*Firefox 18-*/
.contacts-form form input:-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}

Вот такими нехитрыми способами можно сделать действительно красивое оформление формы.

Как изменить цвет текста в input css

Как изменить цвет текста и фона в текстовом поле?

Установить цвет фона и текста для однострочного текстового поля формы.

Решение

Цвет фона элемента задается стилевым свойством background-color , а цвет текста с помощью color , эти свойства необходимо добавить к селектору INPUT . Поскольку тег <input> является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.

Пример 1. Цвет текста и фона в текстовом поле

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля после добавления к нему стилей

В данном примере добавляется новый класс с именем colortext , он добавляется к тегу <input> с помощью конструкции .

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу <input> в этом случае всегда добавляется атрибут type . Используя запись INPUT[type=»text»] задаем стиль для всех элементов <input> , но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).

CSS Input field text color of inputted text

When you click on this field, the black placeholding text dissapears (thanks to jquery.placeholder).

Any text inputted into this field, I want it to turn red, and when you deselect this field, I want it to stay red.

At the moment, the text saying «E-Mail» is black, and anything I type into is red, which is great, but as soon as i deselect, it goes back to black. Can anyone help me? I want the text to stay red, even after it’s deselected. Here is my code

<input type=»color»>

<input> элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

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

Интерактивный пример

Value	7-значная DOMString , указывающая <color> в строчной шестнадцатеричной системе счисления
События	change и input
Поддерживаемые общие атрибуты	autocomplete и list
IDL атрибуты	list и value
Методы	select() (en-US)

Value

value элемента <input> типа color всегда является DOMString , который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.

Использование настроек цвета

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

Предоставление цвета по умолчанию

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

Если вы не зададите значение, то по умолчанию будет #000000 , то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ»#», за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

Отслеживание изменений цвета

Как и в случае с другими типами <input> , есть два события, которые могут быть использованы для обнаружения изменения цвета значения: input и change . input запускается на элементе <input> каждый раз, когда меняется цвет. change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value .

Вот пример, который наблюдает за изменениями со временем значения цвета:

Выбор значения

Если реализация элемента <input> типа color в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () (en-US) метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует color , select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.

Вариации внешнего вида

Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:

То же самое можно увидеть и в Firefox 55:

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

Validation

Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс :invalid .

Пример

Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания change и input событий, чтобы взять новый цвет и применить его к каждому <р> элемента в документе.

HTML довольно прост — пара абзацев описательного материала с <input> типа color с идентификатором colorWell , который мы будем использовать для изменения цвета текста абзацев.

JavaScript

Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик load для выполнения основной работы запуска, как только страница будет полностью загружена.

Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузки startup() :

Это возвращает ссылку на элемент color** <input> **в переменной colorWell , а затем устанавливает значение входного цвета в значение defaultColor . То цвет входное input событие настроено, чтобы вызвать updateFirst() функцию и change событие, вызывается updateAll() . Они оба видны ниже.

Наконец, мы вызываем select () (en-US) для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

Реакция на изменение цвета

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

Css placeholder color или как изменить цвет placeholder css

Доброго времени, коллеги! Бывало ли у вас такое, что заказчик говорит что плохо виден текст в полях для заполнения формы? Более того, кто ведет свои блоги, знает, что цвет текста в input в комментариях всегда какой-то нечитаемый, блеклый, а браузер Mozilla и вовсе его «размазывает».

Css placeholder color

И поэтому сегодня, мы рассмотрим такой вопрос как изменить цвет placeholder при помощи css. Как по мне, решение внизу лучшее так как оно более валидно и не требует особых знаний в css, к тому же, добавить свой color к placeholder сможет каждый.

HTML: стандартная конструкция

Префиксы

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

Но если делаете проект на заказ, то рекомендую добавить еще несколько строк. Важно: не объединяйте эти стили вместе с вашими, уже существующими, а прописывайте так как они есть в примере ниже.

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

Читайте также:

Трюк: изменение прозрачности

Вообще, существует несколько фишек по стилизации и «анимации» placeholder’а, но если есть необходимость чтобы проект прошел проверку на валидность, то не стоит такими фишками баловаться.

Плагин

А если уж совсем хочется или возможно требуется в разработке проекта, то обратите внимание на плагин по ссылке ниже. Он добавляет к полю лишь label имитируя плейсхолдер, который однозначно можно кастомизировать как душе угодно. Больше того, это даже будет работать в сафари, ~~черт его побери~~…

Документация и демо

Пример на Codepen

На сегодня сеанс окончен, до встречи в следующей статье! Не делайте гуано-сайтов, не надо!

Стилизуем placeholder при помощи CSS ➤ ✪WEBMISTER✪

Стилизуем placeholder при помощи CSS

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css

::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;}

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации 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-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать свойство ellipsis text-overflow: ellipsis Такой синтаксис будет работать во всех новых браузерах.

css

input[placeholder] {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;}

Обратите внимание на троеточие в конце.

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

в некоторых браузерах при получении фокуса инпутом
в других браузерах при наличии хотя бы одного введенного символа

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

css

:focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent}

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a.

Вот сss:

css

/* плавное изменение прозрачности placeholder-а при фокусе */.input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}/* сдвиг placeholder-а вправо при фокусе*/.input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0. 3s ease;} .input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}/* сдвиг placeholder-а вниз при фокусе*/.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0. 5s ease;} .input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

input type text placeholder — ComputerMaker.info

Автор admin На чтение 4 мин. Просмотров 49 Опубликовано 15. 12.2019

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

Стиль placeholder-a можно изменить с помощью такого набора css правил:

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Смотрим, что получилось:

font (и сопутствующие свойства)
background (и сопутствующие свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

Содержание

А если placeholder не вмещается?
Как скрыть placeholder при фокусе?
Скрываем placeholder красиво
Исчезающая подсказка в и
Стилизация: изменить цвет placeholder CSS
Поменять стиль поля ввода с placeholder CSS
Подсказка пропадает при получении фокуса другие «> и
В конце длинного обрезанного подсказывающего текста поставить многоточие
Синтаксис ?
Обозначения
Пример
Примечание
Браузеры ?
Браузеры

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

в некоторых браузерах при получении фокуса инпутом
в других браузерах при наличии хотя бы одного введенного символа

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

Исчезающая подсказка в и

Стилизация: изменить цвет placeholder CSS

Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder . Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition .

Поменять стиль поля ввода с placeholder CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder .

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder .

Подсказка пропадает при получении фокуса другие «> и

В конце длинного обрезанного подсказывающего текста поставить многоточие

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

Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис ?

Обозначения

Описание	Пример
Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[, ]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Пример

Результат примера показан на рис. 1.

Рис. 1. Использование ::placeholder

Примечание

Internet Explorer использует псевдокласс :-ms-input-placeholder .

Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .

Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Andro >::-webkit-input-placeholder .

Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .

Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Браузеры ?

10.1

2.1

4.3

10.3

Браузеры

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

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

::заполнитель — CSS: Каскадные таблицы стилей

Псевдоэлемент CSS ::placeholder представляет текст-заполнитель в элементе или </code>.</p><p> Только подмножество свойств CSS, которые применяются к псевдоэлементу <code> ::first-line </code>, можно использовать в правиле, использующем <code> ::placeholder </code> в его селекторе.</p><p> <strong> Примечание: </strong> В большинстве браузеров текст-заполнитель по умолчанию выглядит полупрозрачным или светло-серым цветом.</p><pre> ::заполнитель </pre><h4><span class="ez-toc-section" id="i-40"> Цветовой контраст </span></h4><h5><span class="ez-toc-section" id="i-41"> Коэффициент контрастности </span></h5><p> Текст-заполнитель обычно имеет более светлую цветовую обработку, чтобы показать, что это предложение относительно того, какой тип ввода будет действительным, а не фактический ввод любого типа.</p><p> Важно убедиться, что коэффициент контрастности между цветом текста-заполнителя и фоном ввода достаточно высок, чтобы люди с плохим зрением могли его прочитать, а также убедиться, что существует достаточная разница между текст заполнителя и цвет входного текста, чтобы пользователи не приняли заполнитель за введенные данные.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/thrivingto100.com/wp-content/uploads/2022/01/1280px-Placeholder-768x596.png' /><noscript><img loading='lazy' src='/800/600/http/thrivingto100.com/wp-content/uploads/2022/01/1280px-Placeholder-768x596.png' /></noscript></p><p> Коэффициент цветового контраста определяется путем сравнения яркости текста-заполнителя и входных значений цвета фона. Чтобы соответствовать текущим рекомендациям по доступности веб-контента (WCAG), требуется соотношение 4,5:1 для текстового контента и 3:1 для более крупного текста, например заголовков. Крупный текст определяется как 18,66 пикселя и полужирный или больше, или 24 пикселя или больше.</p><ul><li> WebAIM: проверка цветового контраста</li><li> MDN Понимание WCAG, пояснения к Руководству 1.4</li><li> Понимание критерия успеха 1.4.3 | W3C Понимание WCAG 2.0</li></ul><h5><span class="ez-toc-section" id="i-42"> Удобство использования </span></h5><p> Текст-заполнитель с достаточным цветовым контрастом может интерпретироваться как введенный ввод. Текст-заполнитель также исчезнет, когда пользователь введет содержимое в элемент <code> <input> </code>. Оба эти обстоятельства могут помешать успешному завершению формы, особенно для людей с когнитивными проблемами.</p><p> Альтернативный подход к предоставлению информации-заполнителя состоит в том, чтобы включить ее за пределами ввода в непосредственной близости, а затем использовать <code> aria-described by </code>, чтобы программно связать <code> <input> </code> с его подсказкой.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/electricbody.enfield.kerchan.com/wp-content/uploads/2021/09/placeholder-wire-image-white.jpg' /><noscript><img loading='lazy' src='/800/600/http/electricbody.enfield.kerchan.com/wp-content/uploads/2021/09/placeholder-wire-image-white.jpg' /></noscript></p><p> В этой реализации содержимое подсказки доступно, даже если информация введена в поле ввода, и при загрузке страницы ввод появляется свободным от ранее существовавшего ввода. В большинстве технологий чтения с экрана будет использоваться <code> aria-described by </code>, чтобы прочитать подсказку после объявления текста метки ввода, и человек, использующий программу чтения с экрана, может отключить ее, если посчитает дополнительную информацию ненужной.</p><pre> <label for="user-email">Ваш адрес электронной почты</label> <span>Пример: jane@sample.com</span> <ввод aria-describedby="user-email-подсказка" имя = "электронная почта" тип = "электронная почта" /> </pre><ul><li> Заполнители в полях формы вредны — Nielsen Norman Group</li></ul><h4><span class="ez-toc-section" id="_Windows"> Режим высокой контрастности Windows </span></h4><p> Текст-заполнитель будет отображаться с тем же стилем, что и текстовое содержимое, введенное пользователем, при отображении в режиме высокой контрастности Windows. Некоторым людям будет сложно определить, какое содержимое было введено, а какое является текстом-заполнителем.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/saxtutor.co.uk/wp-content/uploads/2017/02/placeholder_02-min-800x800.jpg' /><noscript><img loading='lazy' src='/800/600/http/saxtutor.co.uk/wp-content/uploads/2017/02/placeholder_02-min-800x800.jpg' /></noscript></p><ul><li> Грег Уитворт — Как использовать -ms-high-contrast</li></ul><h4><span class="ez-toc-section" id="i-43"> Метки </span></h4><p> Заполнители не являются заменой элемента <code> <label> </code>. Без метки, которая была программно связана с вводом с использованием комбинации атрибутов <code> для </code> и <code> id </code>, вспомогательные технологии, такие как программы чтения с экрана, не могут анализировать <code> элемента <input> </code>.</p><ul><li> MDN Основные подсказки формы</li><li> Заполнители в полях формы вредны — Nielsen Norman Group</li></ul><h4><span class="ez-toc-section" id="i-44"> Изменение внешнего вида заполнителя </span></h4><p> В этом примере показаны некоторые настройки, которые можно внести в стили текста заполнителя.</p><h5><span class="ez-toc-section" id="HTML-3"> HTML </span></h5><pre> <input placeholder="Введите здесь" /> </pre><h5><span class="ez-toc-section" id="CSS"> CSS </span></h5><pre> input::placeholder { красный цвет; размер шрифта: 1.2em; стиль шрифта: курсив; } </pre><h5><span class="ez-toc-section" id="i-45"> Результат </span></h5><h4><span class="ez-toc-section" id="i-46"> Непрозрачный текст </span></h4><p> Некоторые браузеры (такие как Firefox) устанавливают для <code> непрозрачности </code> заполнителей значение по умолчанию меньше 100%.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn.wpbeginner.com/wp-content/uploads/2011/09/dropdownplaceholdergf.gif' /><noscript><img loading='lazy' src='/800/600/http/cdn.wpbeginner.com/wp-content/uploads/2011/09/dropdownplaceholdergf.gif' /></noscript> Если вы хотите полностью непрозрачный текст-заполнитель, установите <code> непрозрачность от </code> до <code> 1 </code> .</p><h5><span class="ez-toc-section" id="HTML-4"> HTML </span></h5><pre> <input placeholder="Непрозрачность по умолчанию" /> <input placeholder="Полная непрозрачность" /> </pre><h5><span class="ez-toc-section" id="CSS-2"> CSS </span></h5><pre> :: заполнитель { цвет: зеленый; } .force-opaque :: заполнитель { непрозрачность: 1; } </pre><h5><span class="ez-toc-section" id="Result"> Result </span></h5><table><thead><tr><th scope="col"> Specification</th></tr></thead><tbody><tr><td> Unknown specification <br/> <small> # placeholder-pseudo </small></td></tr></tbody></table><p> BCD tables only load in the browser</p> с включенным JavaScript. Включите JavaScript для просмотра данных.<ul><li> Псевдокласс <code> :placeholder-show </code> стилизует элемент, который <em> имеет </em> активный заполнитель.</li><li> Связанные элементы HTML: <code> <input> </code> , <code> <textarea> </code></li><li> HTML-формы</li></ul><p> <b> Последнее изменение: </b> <time datetime="2022-09-27T04:25:08.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/12/ff/e5/12ffe596c9c3d0ea7ab73f217b9a8715.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/12/ff/e5/12ffe596c9c3d0ea7ab73f217b9a8715.png' /></noscript> 000Z»> 27 сентября 2022 г. </time> , участниками MDN</p><h2><span class="ez-toc-section" id="_HTML5_CSS"> Изменение цвета заполнителя ввода HTML5 с помощью CSS </span></h2><p> Просмотреть обсуждение</p><p> Улучшить статью</p><p> Сохранить статью</p><ul><li> Уровень сложности: Базовый</li><li> Последнее обновление: 08 ноя, 2021</li></ul><p><li> Читать</li><li> Обсудить</li></p><p> Посмотреть обсуждение</p><p> Улучшить статью</p><p> Сохранить статью</p><p> Селектор заполнителя в псевдоэлементе CSS используется для оформления текста-заполнителя путем изменения цвета текста и позволяет изменять стиль текста. В большинстве браузеров заполнитель (внутри тега ввода) имеет серый цвет. Для того, чтобы изменить цвет этого заполнителя, нестандартный 9Можно использовать селекторы 0192 ::placeholder </i>, которые реализуют атрибут цвета в этом конкретном селекторе. Этот селектор варьируется от браузера к браузеру. Например, для браузеров Google Chrome, Mozilla Firefox, Opera и т. д. селекторы могут быть реализованы как:</p><p> <strong> Синтаксис: </strong> </p><pre> ::placeholder </pre><ul><li><p> <strong> Для Internet Explorer: </strong></p> :900-22 input-placeholder </pre></li><li><p> <strong> Для Microsoft Edge: </strong></p><pre> ::-ms-input-placeholder </pre></li></ul><p> <strong> Пример 1: </strong> Этот код показывает использование селекторов <i> ::placeholder </i> в разных браузерах.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.fineartamerica.com/images/artworkimages/mediumlarge/3/placeholder-mohamed-farhan.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.fineartamerica.com/images/artworkimages/mediumlarge/3/placeholder-mohamed-farhan.jpg' /></noscript></p><h3><span class="ez-toc-section" id="HTML-5"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Изменить цвет заполнителя</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> style </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> ::placeholder { </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> /* Firefox, Chrome, Opera */ </code></p><p data-readability-styled="true"> <code> </code> <code> цвет: синий; </code></p><p data-readability-styled="true"> <code> </code> <code> } </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> :-ms-input-placeholder {0005</p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> /* Internet Explorer 10-11 */ </code></p><p data-readability-styled="true"> <code> 900 красный; </code></p><p data-readability-styled="true"> <code> </code> <code> } </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> ::-ms-input-placeholder { </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> /* Microsoft Edge */ </code></p><p data-readability-styled="true"> <code> </code> <code> color: апельсин; </code></p><p data-readability-styled="true"> <code> </code> <code> } </code></p><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> style </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> p </code> <code> >Изменить цвет заполнителя</ </code> <code> p </code> <code> > </code></p> <code> 3 9 9 9 <code> 1<h2><span class="ez-toc-section" id="4">4 </span></h2></code> <code> < </code> <code> input </code> <code> type </code> <code> = </code> <code> "text" </code> <code> placeholder </code> <code> = </code> <code> "Enter your Text" </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code></p><p data-readability-styled="true"> <code> </ </code> <code> HTML </code> <code>> </code></p></td></tr></tbody></table><p> <strong> Выход: </strong></p><p> <strong> Примечание: </strong> Селектор заполнителя больше не поддерживается интернет -исследователем.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/3.bp.blogspot.com/-r2mmTiBw24U/WQgnFwlRwII/AAAAAAAACOc/813vc9U10P89qJB_1RZ4N1_95FFLbzprQCLcB/s640/Screenshot%2Bat%2B2017-05-02%2B13%253A19%253A52.png' /><noscript><img loading='lazy' src='/800/600/http/3.bp.blogspot.com/-r2mmTiBw24U/WQgnFwlRwII/AAAAAAAACOc/813vc9U10P89qJB_1RZ4N1_95FFLbzprQCLcB/s640/Screenshot%2Bat%2B2017-05-02%2B13%253A19%253A52.png' /></noscript></p><p> <strong> Пример 2 </strong> : Этот код реализует селектор-заполнитель в атрибуте электронной почты входного тега. Селекторы-заполнители можно применять к любым атрибутам (текст, телефон, пароль и т. д.) входного тега, чтобы выделить изменения цвета в любых других атрибутах.</p><h3><span class="ez-toc-section" id="HTML-6"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> Head </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> <</code> <code> Название </code> <code>> Изменение заполнителя. [type="email"]::placeholder { </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> /* Firefox, Chrome, Opera */ </code></p><p data-readability-styled="true"> <code> 0005 <code> цвет: синий; </code></p><p data-readability-styled="true"> <code> </code> <code> } </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> input[type="email"]:-ms-input-placeholder { </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> /* Internet Explorer 10-11 */ </code></p><p data-readability-styled="true"> <code> </code> <code> цвет: красный; </code></p><p data-readability-styled="true"> <code> </code> <code> } </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> input[type="email-input"]::-place0005</p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> /* Microsoft Edge */ </code></p><p data-readability-styled="true"> <code> <code> </code> цвет: оранжевый </code></p><p data-readability-styled="true"> <code> </code> <code> } </code></p><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> style </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> p </code> <code> >Change Placeholder Color</ </code> <code> p </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> input </code> <code> type </code> <code> = </code> <code> "email" </code> <code> placeholder </code> <code> = </code> <code> "Введите свою электронную почту" </code> <code>> </code></p><p data-readability-styled="true"> <code> </ </code> <code> Body </code> <code>> </code></p><p data-readability-styled="true"> <code> </code></p><p data-readability-styled="true"> <code> </ </code> <code> HTML </code> <code>> </code></p></td></tr></tbody></table><p> <strong> Выход: </strong></p><p></p> <br/><p> Рекомендованные статьи</p><p> Страница:</p><h2><span class="ez-toc-section" id="_html_hophold_wondblib_with_hole_holeplib_with_with_word_wondblib_with_hole_holefit_with_holepblib_with_word_and_hold_world_world_world_wondblib_wondblib_alliblib"> Как изменить цвет html hophold wondblib with hole holeplib with with word wondblib with hole holefit with holepblib with word and hold world world world wondblib wondblib alliblib.</span></h2><img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/centre-dentaire-epinay-sur-seine-93.fr/wp-content/uploads/Dentiste-Epinay-sur-Seine-Dr-Amna-Ettayeb.jpg' /><noscript><img loading='lazy' src='/800/600/http/centre-dentaire-epinay-sur-seine-93.fr/wp-content/uploads/Dentiste-Epinay-sur-Seine-Dr-Amna-Ettayeb.jpg' /></noscript> . Этот атрибут, используемый в элементах <input> и <textarea>, дает пользователю подсказку о том, что можно ввести в поле.</p><p> В большинстве браузеров цвет текста-заполнителя по умолчанию светло-серый. Если вы хотите изменить его, вам нужно использовать псевдоэлемент ::placeholder.</p><p> Обратите внимание, что Firefox добавляет более низкую непрозрачность к заполнителю, поэтому используйте <strong> opacity: 1; </strong>, чтобы исправить это.</p><p> Если вы хотите выбрать сам ввод, когда отображается его текст-заполнитель, используйте псевдокласс <kbd> :placeholder-show </kbd>.</p><p> Пример кода будет выглядеть следующим образом.</p><h4><span class="ez-toc-section" id="i-47"> Пример изменения цвета текста-заполнителя: </span></h4><pre> <!DOCTYPE html> <html> <голова> <title>Название документа</title> <стиль> вход { ширина: 90%; отступ: 10 пикселей; поле: 5px; контур: нет; } ввод[тип="отправить"] { ширина: 150 пикселей; } ввод:: заполнитель { цвет: #1c87c9; непрозрачность: 1; } ввод: показанный заполнитель { граница: 1px сплошная #095484; } </стиль> </голова> <тело> <form action="/form/submit" method="post"> Имя: <input type="text" name="firstname" placeholder="John"> <br> <br> Фамилия: <input type="text" name="lastname" placeholder="Lennon"> <br> <br> Адрес электронной почты: <input type="email" name="email" placeholder="[email protected]"> <input type="submit" value="Отправить" /> </форма> </тело> </html> </pre><p> Попробуй сам "</p><h4><span class="ez-toc-section" id="i-48"> Результат </span></h4> Имя:<p> Фамилия:</p><p> Адрес электронной почты:</p><p> Вы также можете изменить цвет текста, который будет заполнен вместо заполнителя.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/KjLzt.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/KjLzt.png' /></noscript> Для этого определите класс для каждого элемента <input> и придайте ему стиль.</p><h4><span class="ez-toc-section" id="i-49"> Пример установки разных цветов для текста-заполнителя: </span></h4><pre> <!DOCTYPE html> <html> <голова> <title>Название документа</title> <стиль> вход { отступ: 10 пикселей; поле: 5px; ширина: 90%; } ввод[тип="отправить"] { ширина: 100 пикселей; } .один { цвет: #8ebf42; } .два { цвет: #ff0066; } .три { цвет: #1c87c9; } .one :: заполнитель { цвет: #1c87c9; } .two :: заполнитель { цвет: #ff0000; } .three :: заполнитель { цвет: #8ebf42; } ввод: показанный заполнитель { граница: 1px сплошная #095484; } </стиль> </голова> <тело> <form action="/form/submit" method="post"> Имя: <input type="text" name="firstname" placeholder="John"> <br> <br> Фамилия: <input type="text" name="lastname" placeholder="Lennon"> <br> <br> Адрес электронной почты: <input type="email" name="email" placeholder="[email protected]"> <input type="submit" value="Отправить" /> </форма> </тело> </html> </pre><p> Попробуй сам "</p><p> Важно помнить, что для каждого браузера существует свой способ реализации.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/otvet.imgsmail.ru/download/u_7b41bdb6676a627d73ab67fbbef12df7_800.png' /><noscript><img loading='lazy' src='/800/600/http/otvet.imgsmail.ru/download/u_7b41bdb6676a627d73ab67fbbef12df7_800.png' /></noscript> Например, псевдоэлемент</p><ol><li> <kbd> ::-webkit-input-placeholder </kbd> для Chrome/Safari/Opera,</li><li> <kbd> ::-ms-input-placeholder </kbd> псевдокласс для Edge (также поддерживает префикс webkit).</li></ol><p> Приведенные выше псевдокласс и псевдоэлемент необходимы для обработки требуемого результата.</p><h4><span class="ez-toc-section" id="i-50"> Пример изменения цвета текста-заполнителя с использованием некоторых расширений: </span></h4><pre> <!DOCTYPE HTML> <html> <голова> <title>Название документа</title> <стиль> вход { отступ: 5px 10px; } ::заполнитель { цвет: #1c87c9; непрозрачность: 1; /* Fire Fox */ } :-вебкит-ввод-заполнитель { /* Хром, Сафари, Опера */ цвет: #1c87c9; } ::-ms-input-placeholder { /* Microsoft Edge */ цвет: #1c87c9; } </стиль> </голова> <тело> <form action="/form/submit" method="post"> Имя: <input type="text" name="firstname" placeholder="John"> <br> <br> Фамилия: <input type="text" name="lastname" placeholder="Lennon"> <br> <br> Адрес электронной почты: <input type="email" name="email" placeholder="[email protected]"> <br/> <br/> <input type="submit" value="Отправить" /> </форма> </тело> </html> </pre><p> Попробуй сам "</p><h2><span class="ez-toc-section" id="_CSS-Tricks_-_CSS-Tricks"> ::заполнитель | CSS-Tricks - CSS-Tricks </span></h2><p> Псевдоэлемент <code> ::placeholder </code> (или псевдокласс, в некоторых случаях, в зависимости от реализации браузера) позволяет вам стилизовать текст-заполнитель элемента формы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/snipp.ru/uploads/view/d7ac0e86fba5d71fa8baa6d2855d8111.png' /><noscript><img loading='lazy' src='/800/600/http/snipp.ru/uploads/view/d7ac0e86fba5d71fa8baa6d2855d8111.png' /></noscript> Например, текст, установленный с атрибутом </code> заполнителя </code>:</p><pre markup="tt"> <input type="email" placeholder="[email protected]"> </pre><p>. Вы можете стилизовать этот текст в большинстве браузеров с помощью этого небольшого количества селекторов с префиксом поставщика:</p><pre markup="tt"> ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ цвет: розовый; } ::-moz-placeholder { /* Firefox 19+ */ цвет: розовый; } :-ms-input-placeholder { /* IE 10+ */ цвет: розовый; } :-moz-placeholder { /* Firefox 18- */ цвет: розовый; } </pre><p> <strong> Важное предупреждение: </strong> этот синтаксис нестандартен, отсюда и все сумасшествие с именами. Его вообще нет в спецификации. <code> :placeholder-show </code> является стандартным, и даже авторы спецификаций считают, что <code> ::placeholder </code> будет стандартизированной версией.</p><p> Как и любой псевдоним, вы можете ограничить его определенными элементами по мере необходимости, например:</p><pre markup="tt"> input[type="email"].<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/xflairng.com/wp-content/uploads/2015/12/blog-placeholder.jpg' /><noscript><img loading='lazy' src='/800/600/http/xflairng.com/wp-content/uploads/2015/12/blog-placeholder.jpg' /></noscript> big-dog::-webkit-input-placeholder { оранжевый цвет; } </pre><h4><span class="ez-toc-section" id="Demo"> Demo </span></h4><h4><span class="ez-toc-section" id="i-51"> Разница между </span></h4><code> :placeholder-show </code> и <code> ::placeholder </code></h4><p> <code> :placeholder-show </code> заключается в выборе самого ввода, когда отображается его текст-заполнитель. В отличие от <code> ::placeholder </code>, который стилизует текст заполнителя.</p><p> Вот схема:</p><p> Я нашел это очень запутанным, так как:</p><ol><li> в спецификациях есть только <code> :placeholder-show </code>, а не <code> ::placeholder </code></li><li> <code> :placeholder-show </code> все еще может влиять на стиль текста заполнителя, поскольку это родительский элемент (например, размер шрифта).</li></ol><p> Обратите внимание, что <code> :placeholder-show </code> является псевдоклассом <strong> класса </strong> (это элемент в определенном состоянии), а <code> ::placeholder </code> является псевдоэлементом <strong> </strong> (видимая вещь, которой на самом деле нет в DOM). ). Отличается одинарным двоеточием от двойного.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/bTERg.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/bTERg.png' /></noscript></p><p> Tab Аткинс прояснил это для меня по электронной почте:</p><blockquote><p> :placeholder-show, будучи псевдоклассом, должен выбрать существующий элемент — он выбирает ввод всякий раз, когда вы находитесь в состоянии отображения заполнителя. Псевдоэлемент ::placeholder оборачивает фактический текст заполнителя.</p></blockquote><h4><span class="ez-toc-section" id="i-52"> Элемент или класс? </span></h4><p> Эта функция не стандартизирована. Это означает, что у каждого браузера свое представление о том, как это должно работать.</p><p> Первоначально Firefox реализовал это как псевдокласс, но изменил его по ряду причин. Короче говоря, вы не можете сделать столько же с псевдоклассом.</p><p> Например, если вы хотите изменить цвет текста, когда ввод находится в фокусе. Вы бы использовали селектор типа <code> input:focus::placeholder </code> , чего нельзя было бы сделать с псевдоклассом (они не складываются одинаково).</p><p> IE10 поддерживает это как псевдокласс, а не как элемент. Все остальные реализовали псевдоэлемент.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/artecnia.es/wp-content/uploads/2013/11/1920x800-770x440.png' /><noscript><img loading='lazy' src='/800/600/http/artecnia.es/wp-content/uploads/2013/11/1920x800-770x440.png' /></noscript></p><h4><span class="ez-toc-section" id="_Firefox"> Цвет заполнителя Firefox </span></h4><p> Вы могли заметить, что в Firefox цвет заполнителя выглядит блеклым по сравнению с другими браузерами. На изображении ниже Firefox 43 показан слева, а Chrome 47 — справа:</p> Версия Chrome идеально подходит для стиля, который мы хотели бы видеть повсюду.<p> Это связано с тем, что по умолчанию ко всем заполнителям в Firefox применяется значение непрозрачности, поэтому, чтобы исправить это, нам нужно сбросить это значение:</p><pre markup="tt"> ::-moz-placeholder { непрозрачность: 1; } </pre><p> Вы можете увидеть больше, протестировав эту демонстрацию в Firefox.</p><h4><span class="ez-toc-section" id="i-53"> Поддерживаемые стили </span></h4><p> Псевдоэлемент поддерживает стилизацию следующих свойств:</p><ul><li> <code> шрифт </code> свойства</li><li> <code> color </code></li><li> <code> background </code> properties</li><li> <code> word-spacing </code></li><li> <code> letter-spacing </code></li><li> <code> text-decoration </code></li><li> <code> vertical-align </code></li><li> <code> text-transform </code></li><li> <code> line -height </code></li><li> <code> text-indent </code></li><li> <code> opacity </code></li></ul><p> Псевдокласс также поддерживает большинство (если не все) этих свойств, но он не такой гибкий по причинам, изложенным выше.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/impuls-web.ru/wp-content/uploads/2015/12/placeholder2.jpg' /><noscript><img loading='lazy' src='/800/600/http/impuls-web.ru/wp-content/uploads/2015/12/placeholder2.jpg' /></noscript></p><h4><span class="ez-toc-section" id="Browser_support"> Browser support </span></h4><p/><h5><span class="ez-toc-section" id="Desktop"> Desktop </span></h5><table><thead><tr><th> Chrome</th><th> Firefox</th><th> IE</th><th> Edge</th><th> Safari</th></tr></thead><tbody><tr><td title="Chrome - "> 57</td><td title="Firefox - "> 19*</td><td title="IE - "> No</td><td title="Edge - "> 79</td><td title="Safari - "> 10.1</td></tr></tbody></table><p/><h5><span class="ez-toc-section" id="i-54"> Мобильный телефон/планшет </span></h5><table><thead><tr><th> Android Chrome</th><th> Android Firefox</th><th> Android</th><th> iOS Safari</th></tr></thead><tbody><tr><td title="Android Chrome - "> 105</td><td title="Android Firefox - "> 104</td><td title="Android - "> 105</td><td title="iOS Safari - "> 10.3</td></tr></tbody></table><h4><span class="ez-toc-section" id="Other_resources"> Other resources </span></h4><ul><li> MDN Docs</li><li> “The CSS3 Placeholder Pseudo-element” by Guil Hernandez</li><li> “Styling HTML placeholder attribute” by Mounir Lamouri</li><li> “ Styling Placeholders», автор Tab Atkins</li></ul><h2><span class="ez-toc-section" id="_mdb"> Изменение цвета заполнителя ввода mdb </span></h2><ol><li> Домашняя страница МДБ</li><li> Главная страница поддержки</li><li> МДБ Вью</li></ol><hr/><p data-readability-styled="true"> <strong> Тема: </strong> Изменить цвет заполнителя ввода mdb</p><p> <strong> Рохелио Санчес </strong> свободно спросил 3 года назад</p><p> 0 0</p><hr/><p> **Ожидаемое поведение** Я хочу иметь возможность изменить цвет заполнителя при вводе mdb.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/d-navi.ru/wp-content/uploads/2020/04/kak-pomenyat-tsvet-gub-v-fotoshope-3.jpg' /><noscript><img loading='lazy' src='/800/600/http/d-navi.ru/wp-content/uploads/2020/04/kak-pomenyat-tsvet-gub-v-fotoshope-3.jpg' /></noscript> **Реальное поведение** Я пытался изменить его через css, но это не работает. **Ресурсы (скриншоты, фрагменты кода и т. д.)** Я попробовал это</p><pre> .md-form input::placeholder { белый цвет; } </pre><p> <strong> ТАКЖЕ </strong> Как получилось, что я профессиональный пользователь, но у меня нет премиум-поддержки? и когда я нажимаю, чтобы переключиться на версию vue, он перенаправляется на документацию vue.</p><hr/><p> <strong> Николай Смоленский </strong> сотрудники ответил 3 года назад</p><p> 0 0 Лучший ответ</p><hr/><p data-readability-styled="true"><p> Привет Рохелио,</p><p> Ваш код правильный.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/19j09.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/19j09.png' /></noscript> Я только что проверил это. Возможно, вам нужно удалить атрибут <code> с областью действия </code> из тега вашего стиля:</p><pre> <стиль> .md-form input::placeholder { красный цвет; } </стиль> </pre><p> По премиальной поддержке - другое дело. При покупке пакета PRO Вы по-прежнему являетесь пользователем PRO. Вы можете приобрести ПРЕМИУМ-поддержку дополнительно, если хотите, но в большинстве случаев мы отвечаем на все вопросы по Vue каждый рабочий день.</p><p> С уважением</p></p><p> Укажите мин. 20 символов.</p><p> Привет, Рохелио,</p><p> Ваш код правильный. Я только что проверил это. Возможно, вам нужно удалить атрибут <code> с областью действия </code> из тега вашего стиля:</p> <pre><style>.md-form input::placeholder{красный цвет}</стиль></pre><p>По премиум поддержке - это другое дело. При покупке пакета PRO Вы по-прежнему являетесь пользователем PRO. Вы можете приобрести ПРЕМИУМ-поддержку дополнительно,если хотите,но в большинстве случаев мы отвечаем на все вопросы по Vue каждый рабочий день.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/freefrontend.com/assets/img/css-select-boxes/select-box-with-placeholder-css-only.png'/><noscript><img loading='lazy' src='/800/600/http/freefrontend.com/assets/img/css-select-boxes/select-box-with-placeholder-css-only.png'/></noscript></p><p>С уважением </p><hr/><p><strong>водникк </strong>свободно ответил 3 года назад </p><p>0 0 Лучший ответ </p><hr/><p data-readability-styled="true"><p>Привет,@Rogelio Sanchez,</p><p>Вы можете попробовать стилизовать заполнители для ввода текста,используя </p><pre>#yourinputid::placeholder{цвет:розовый}</pre><p>Не забудьте удалить атрибут тега <code>scoped </code><style>,чтобы можно было добраться до ввода! </p><p>Лучший,</p></p><p>Пожалуйста,введите мин.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/51/7d/72/517d72277044df99a6b8aba745b24870.gif'/><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/51/7d/72/517d72277044df99a6b8aba745b24870.gif'/></noscript>20 символов. </p><p>Привет@Rogelio Sanchez,</p><p>Вы можете попробовать стилизовать заполнители ввода текста,используя </p><pre>#yourinputid::placeholder{цвет:розовый}</pre><p>Не забудьте удалить атрибут тега <code>scoped </code><style>,чтобы можно было добраться до ввода! </p><p>Лучший,</p><hr/><p>Пишите </p><p data-readability-styled="true">Создать фрагмент </p><hr/><p>Укажите мин. 20 символов. </p><p>Пост </p><h2><span class="ez-toc-section" id="_-_70_71">Изменение цвета текста-заполнителя в блоках форм и информационных бюллетеней (7.0 и 7.1) • Беатрис Карабальо </span></h2><p>Все хитрости CSS 7.07.1 Изменение цвета </p><p data-readability-styled="true"><time datetime="Apr. 6" pubdate="" data-content-field="published-on">6 апр. </time></p><p>Автор Беатрис Карабальо </p><ul><li>00 </li><li>01 </li><li>02 </li><li>99 </li></ul><p>Несколько членов Клуба недавно спросили о том,как можно изменить цвет текста-заполнителя некоторых блоков с помощью CSS,поскольку на данный момент нет способа изменить его с помощью стилей сайта Squarespace.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/3K0tn.png'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/3K0tn.png'/></noscript></p><p>Итак,если вам интересно то же самое,сегодня я хотел бы поделиться с вами тем,как добиться этого для ваших <em>собственных клиентских проектов </em>. </p><p>Это будет быстро,так что давайте сразу к делу! </p><p><h3><span class="ez-toc-section" id="i-55">Блоки формы </span></h3></p><p>Начиная с настроенного блока формы в 7.1,первое,что нам нужно сделать,это <strong>найти контейнер,в котором находится заполнитель </strong>:</p><p>Как вы можете видеть на снимке экрана выше,в настоящее время мы рассматриваем элемент textarea <strong><em></em></strong>класса 9.0003 <em>.field-element </em></strong>и содержит текст-заполнитель <em>«Что мы можем сделать для вас?» </em>. </p><p><strong>Обратите внимание,что текст-заполнитель НЕ является фактическим элементом </strong>,он является частью элемента <strong><em>textarea </em></strong>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/mqhrI.png'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/mqhrI.png'/></noscript></p><p>Чтобы нацелить его,нам нужно использовать селектор <strong><em>::placeholder </em></strong>в полях,в которых он есть. </p><p>Это означает,что мы могли бы использовать следующее для достижения нашей цели:</</pre><p>Однако,если мы быстро взглянем на <em>других </em>полей в нашей форме… </p><p>…мы заметим,что это НЕ <strong><em>textarea </em></strong>элементов,это <strong><em>input </em></strong>элементов. </p><blockquote><p><strong>Примечание:</strong>тип элементов в форме будет различаться в зависимости от полей,которые вы добавили через настройки блока формы! </p></blockquote><p>Итак,если мы продолжим с предыдущим фрагментом,мы не затронем их все. </p><p>Однако вы могли заметить,что <strong><em>.field-element </em></strong>class <em>IS </em>используется всеми различными полями… </p><p>… так что мы можем использовать это вместо того,чтобы убедиться,что мы модифицируем всю партию,не пропуская ни одну из них! </p><pre>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/dinsmoreinc.com/wp-content/uploads/2019/12/placeholder-1280-720-A-900x506.jpg'/><noscript><img loading='lazy' src='/800/600/http/dinsmoreinc.com/wp-content/uploads/2019/12/placeholder-1280-720-A-900x506.jpg'/></</pre><p>Гораздо лучше! </p><p><strong>Тем не менее,сейчас это слишком общее </strong>,так как оно изменит все формы на сайте И блоки информационных бюллетеней,если мы оставим все как есть. </p><blockquote><p><strong>Примечание:</strong>вы увидите далее в этом руководстве,поля блока новостей <em>также </em>имеют класс <strong>.field-element </strong></p></blockquote><p>Лично я не хочу,чтобы это произошло,поэтому я ищите более специфичный для блока </strong><strong>класс </strong>,чтобы изменить только все мои блоки форм,а НЕ блоки информационных бюллетеней:</p><p>Итак,по достижении «<strong>основная обертка </strong>” нашей формы,мы видим,что у нас есть класс <strong><em>.form-block </em></strong>,который мы можем использовать в нашем коде,чтобы сделать вещи более конкретными:</p><pre>.form-block .field-element::заполнитель{цвет:белый !важно}</pre><p>Отлично! </p><p>И точно так же мы знаем,что у нас есть собственный цвет для текста-заполнителя нашего блока формы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/HsX4F.jpg'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/HsX4F.jpg'/></noscript></p><p><h3><span class="ez-toc-section" id="i-56">Блоки бюллетеней </span></h3></p><p>А что,если вы хотите применить то же изменение,но ТОЛЬКО к блокам бюллетеней? </p><p>Итак,давайте взглянем на поля нашей рассылки! </p><p>Как вы можете видеть выше,теперь у нас есть элемент <strong><em>input </em></strong>с парой классов,включая один с именем <strong>9.0147 .field-element </em></strong>(точно так же,как поля из блока формы) и текст-заполнитель «<em>Фамилия </em>». </p><p>Итак,используя тот же подход,что и раньше,вместо нацеливания на заполнитель для элементов ввода,например:</</pre><p>Мы будем использовать класс <strong><em>.field-element </em></strong>,чтобы убедиться,что выбраны все поля (с замещающим текстом). </p><blockquote><p><strong>Примечание:</strong>в данном случае,<strong>нет необходимости использовать класс вместо типа элемента </strong>,так как маловероятно,что в блок рассылки будет добавлен другой тип поля,но,поскольку это не повредит,мы все равно будем придерживаться класса.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/media.lpgenerator.ru/uploads/2016/05/09/image01.gif'/><noscript><img loading='lazy' src='/800/600/http/media.lpgenerator.ru/uploads/2016/05/09/image01.gif'/></noscript></p></</pre><p>Теперь,чтобы убедиться,что мы нацелены только на блоки новостных рассылок,давайте <strong>найдем соответствующий класс </strong>,который позволит нам прояснить это:</p><p>Хорошо,так что в нашей <strong>main block wrapper </strong>мы видим несколько классов,в том числе один с именем <strong><em>.newsletter-block,</em></strong>поэтому давайте использовать это в нашем коде:</p><pre>.newsletter-block .field-element::placeholder{белый цвет}</pre><p>Отлично! </p><p>Итак,вот оно. </p><p>Теперь вы можете легко изменить цвет текста-заполнителя как в формах,так и в блоках информационных бюллетеней в Squarespace! </p><p>До следующего раза,</p><p>B. </p><p><h3><span class="ez-toc-section" id="i-57">Полный код </span></h3></p><p><h4></h4><strong>Заполнитель блока формы </strong></h4></p><pre>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/IyBKR.jpg'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/IyBKR.jpg'/></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/raznoe-2/izmenit-czvet-placeholder-czvet-zameshhayushhego-teksta-htmlbook-ru.html" data-text="Изменить цвет placeholder: Цвет замещающего текста | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/raznoe-2/izmenit-czvet-placeholder-czvet-zameshhayushhego-teksta-htmlbook-ru.html" data-text="Изменить цвет placeholder: Цвет замещающего текста | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/raznoe-2/izmenit-czvet-placeholder-czvet-zameshhayushhego-teksta-htmlbook-ru.html" data-text="Изменить цвет placeholder: Цвет замещающего текста | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/raznoe-2/izmenit-czvet-placeholder-czvet-zameshhayushhego-teksta-htmlbook-ru.html" data-text="Изменить цвет placeholder: Цвет замещающего текста | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/belyj-bekgraund-background-color-htmlbook-ru.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong><span>Белый бэкграунд:background-color | htmlbook.ru</span></a></li><li class="previous"><a href="https://ylianova.ru/html/html-vydelit-zhirnym-kak-sdelat-tekst-zhirnym-webreference.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong><span>Html выделить жирным:Как сделать текст жирным? | WebReference</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/izmenit-czvet-placeholder-czvet-zameshhayushhego-teksta-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span><span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

Имя *

Email *

Сайт