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

Содержание

Псевдоэлемент ::placeholder | WebReference

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

Синтаксис

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

Синтаксис

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>placeholder</title> <style> body { background: #053f38; } input[type=»search»] { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input[type=»search»]::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input[type=»search»]::-webkit-input-placeholder { color: #ffd595; } input[type=»search»]:-ms-input-placeholder { color: #ffd595; } input[type=»search»]::-ms-input-placeholder { color: #ffd595; } input[type=»search»]::placeholder { color: #ffd595; } </style> </head> <body> <form action=»handler.

php»> <p><input type=»search» placeholder=»Поиск по сайту» name=»q»> <input type=»submit» value=»Найти»></p> </form> </body> </html>

Результат примера показан на рис. 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.

Браузеры


10	12	4	57	15	44	5	10. 1	4	19	51


2.1	19	30	4.3	10.3

Браузеры

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

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

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

Псевдоэлементы

См. также

Атрибут placeholder
Подсказка в поле формы
Подсказывающий текст
Псевдокласс :placeholder-shown

Практика

Подсказка

::placeholder — CSS | MDN

CSS псевдоэлемент ::placeholder представляет собой текст placeholder (en-US) в <input> или <textarea> (en-US) элементах.

::placeholder {
  color: blue;
  font-size: 1.5em;
}

В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе ::first-line.

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

Error: could not find syntax for this item

Красный текст

HTML

<input placeholder="Введите что-нибудь!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

Результат

Зелёный текст

HTML

<input placeholder="Введите что-нибудь...">

CSS

input::placeholder {
  color: green;
}

Результат

Цветовой контраст

Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

WebAIM: Color Contrast Checker
MDN Understanding WCAG, Guideline 1.4 explanations

Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Использование

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в <input> элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания

<input> элемента с подсказкой.

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

<label for="user-email">Ваш email адрес</label>
<span>Пример: [email protected]</span>
<input aria-describedby="user-email-hint" name="email" type="email">

Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows.

Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Greg Whitworth — How to use -ms-high-contrast

Метки

Placeholder не является заменой элемента <label>. Без метки, которая программно связывается с формой с помощью for и id атрибутов, такие программы, как скринридеры не смогут анализировать элементы <input>.

MDN Basic form hints (en-US)
Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Specification
CSS Pseudo-Elements Module Level 4 # placeholder-pseudo

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Псевдокласс :placeholder-shown, который позволяет применять стили к элементу с активным placeholder.
Связанные HTML-элементы: <input>, <textarea> (en-US)
HTML-формы

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 24 окт. 2022 г. by MDN contributors.

CSS ::placeholder Селектор

❮ Предыдущий Справочник по селекторам CSS Далее ❯

Пример

Изменение цвета текста-заполнителя в поле ввода:

::-вебкит-ввод-заполнитель { /* Edge */
color: red;
}

:-мс-ввод-заполнитель { /* Internet Explorer 10-11 */
color: red;
}

::заполнитель {
цвет: красный;
}

Попробуйте сами »

Определение и использование

Селектор ::placeholder выбирает элементы формы с текстом-заполнителем, и позвольте вам стилизовать текст заполнителя.

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

Совет: Цвет текста заполнителя по умолчанию светло-серый. в большинстве браузеров.

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

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

Числа, за которыми следует -webkit-, -moz- или -ms-, указывают первую версию, которая работала с префиксом.

Селектор
::заполнитель	57.0 4.0 -вебкит-	12.0 -вебкит- 10.0 -мс-	51,0 4,0 -мунц-	10.1 5.0 -вебкит-	44,0 15,0 -вебкит-

Синтаксис CSS

::placeholder {
объявления css ;
}

❮ Предыдущий Справочник по селекторам CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

8 Top9 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

::placeholder — 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-21"> Цветовой контраст </span></h4> <h5><span class="ez-toc-section" id="i-22"> Коэффициент контрастности </span></h5> <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/mqhrI.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/mqhrI.png' /></noscript> </p> <p> Важно убедиться, что коэффициент контрастности между цветом текста-заполнителя и фоном ввода достаточно высок, чтобы люди с плохим зрением могли его прочитать, а также обеспечить достаточную разницу между текст заполнителя и цвет входного текста, чтобы пользователи не приняли заполнитель за введенные данные. </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-23"> Удобство использования </span></h5> <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/habibomarov.ru/wp-content/uploads/2016/12/placeholder.png' /><noscript><img loading='lazy' src='/800/600/http/habibomarov.ru/wp-content/uploads/2016/12/placeholder.png' /></noscript> Текст-заполнитель также исчезнет, когда пользователь введет содержимое в элемент <code> <input> </code>. Оба эти обстоятельства могут помешать успешному завершению формы, особенно для людей с когнитивными проблемами. </p> <p> Альтернативный подход к предоставлению информации-заполнителя состоит в том, чтобы включить ее за пределами ввода в непосредственной близости, а затем использовать <code> aria-describedby </code>, чтобы программно связать <code> <input> </code> с его подсказкой. </p> <p> В этой реализации содержимое подсказки доступно, даже если информация введена в поле ввода, и при загрузке страницы ввод появляется свободным от ранее существовавшего ввода. Большинство технологий чтения с экрана будут использовать арию <code>, описанную </code>, чтобы прочитать подсказку после объявления текста метки ввода, и человек, использующий программу чтения с экрана, может отключить ее, если сочтет дополнительную информацию ненужной. </p><pre> <label for="user-email">Ваш адрес электронной почты</label> <span>Пример: jane@sample.<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/5c9a119f8c33f6b5d12f72655b18e598.png' /><noscript><img loading='lazy' src='/800/600/http/snipp.ru/uploads/view/5c9a119f8c33f6b5d12f72655b18e598.png' /></noscript> com</span> <ввод aria-describedby="user-email-подсказка" имя = "электронная почта" тип = "электронная почта" /> </pre><ul> <li> Заполнители в полях формы вредны — Nielsen Norman Group </li> </ul> <h4><span class="ez-toc-section" id="_Windows-2"> Режим высокой контрастности Windows </span></h4> <p> Текст-заполнитель будет отображаться с тем же стилем, что и текстовое содержимое, введенное пользователем, при отображении в режиме высокой контрастности Windows. Некоторым людям будет сложно определить, какое содержимое было введено, а какое является текстом-заполнителем. </p> <ul> <li> Грег Уитворт — Как использовать -ms-high-contrast </li> </ul> <h4><span class="ez-toc-section" id="i-24"> Метки </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-25"> Изменение внешнего вида заполнителя </span></h4> <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/3K0tn.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/3K0tn.png' /></noscript> </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-3"> CSS </span></h5><pre> input::placeholder { красный цвет; размер шрифта: 1.2em; стиль шрифта: курсив; } </pre><h5><span class="ez-toc-section" id="i-26"> Результат </span></h5> <h4><span class="ez-toc-section" id="i-27"> Непрозрачный текст </span></h4> <p> Некоторые браузеры (такие как Firefox) устанавливают для <code> непрозрачности </code> заполнителей значение по умолчанию меньше 100%. Если вы хотите полностью непрозрачный текст-заполнитель, установите <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-4"> 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> CSS Pseudo-Elements Module Level 4 <br/> <small> # placeholder-pseudo </small> </td> </tr> </tbody> </table> <p> BCD tables only load in the browser with JavaScript enabled.<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/ithemesforests.com/wp-content/uploads/2018/08/How-to-change-the-color-of-a-Contact-Form-7-placeholder-text.jpg' /><noscript><img loading='lazy' src='/800/600/http/ithemesforests.com/wp-content/uploads/2018/08/How-to-change-the-color-of-a-Contact-Form-7-placeholder-text.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-2.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-2.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-2.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-2.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/izmerit-skorost-mobilnogo-interneta-skorost-interneta-na-smartfone-proverit-skorost-mobilnogo-interneta-na-svoem-telefone-speedtest.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Измерить скорость мобильного интернета: Скорость интернета на смартфоне 🌏 проверить скорость мобильного интернета на своем телефоне — SPEEDTEST</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/fakebuk-vhod-vhod-v-akkaunt-facebook-spravochnyj-czentr-facebook.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Факебук вход: Вход в аккаунт Facebook | Справочный центр Facebook</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-2.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 *

Сайт

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

Псевдоэлемент ::placeholder | WebReference

Синтаксис

Пример

Примечание

Браузеры

См. также

Практика

::placeholder — CSS | MDN

Красный текст

HTML

CSS

Результат

Зелёный текст

HTML

CSS

Результат

Цветовой контраст

Контрастность

Использование

Режим высокой контрастности Windows

Метки

Found a content problem with this page?

CSS ::placeholder Селектор

Пример

Определение и использование

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

Синтаксис CSS

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

::placeholder — CSS: каскадные таблицы стилей

Рубрики

Рубрики