Input цвет placeholder: ::placeholder — CSS | MDN

Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

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

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

html

<input type="text" placeholder="Оставьте сообщение здесь">

input placeholder demo

Стиль 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 – псевдоэлементом.

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

input placeholder demo

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

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

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

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

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;}    

input placeholder demo

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

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

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

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих 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}

input placeholder demo

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

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

input placeholder demo

Вот с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;}

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

Posted on Февраль 27, 2014
by Nedudi Дудин Дмитрий
29 Comments ↓
531,221 views

Стилизуем Placeholder с помощью CSS 

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

::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}

HTML

Префиксы

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

::placeholder { 
 color: deeppink;
}

Но для более старых браузеров вам нужно будет использовать префиксы поставщика.

/* WebKit, Edge */
::-webkit-input-placeholder {
 color: deeppink;
}

/* Firefox 4-18 */
:-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder { 
 color: deeppink;
}

/* Edge */
::-ms-input-placeholder { 
 color: deeppink;
}

/* MODERN BROWSER */
::placeholder { 
 color: deeppink;
}

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

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

Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

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

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

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

::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
 color: deeppink;
 opacity: 1;
}

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор

h2 {
 color: blue;
}

Так что в нашем HTML это будет выглядеть как ожидалось

Но что произойдет, если мы добавим неверный селектор CSS

h2, /* valid */
h3::poop /* invalid */
{
 color: blue;
}

Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.

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

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

Поддерживаемые стили

Вот список всех стилей, которые вы можете применить к вашему placeholder:

• background свойства
• color
• font свойства
• letter-spacing
• line-height
• opacity
• text-decoration
• text-indent
• text-transform
• vertical-align
• word-spacing

Проблемы доступности

Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.

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

1. Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
2. Без label пользователи не могут проверить свою работу перед отправкой формы.
3. Когда появляются сообщения об ошибках, люди не знают, как решить проблему.

Автоматически добавлять Vendor-префиксы

Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.

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

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

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

  
<input type="text" placeholder="Оставьте сообщение здесь">
  

Стиль placeholder-a можно изменить с помощью такого набора 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-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.

  
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-а происходит по-разному.

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

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

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

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

  
/* плавное изменение прозрачности  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;}
  

Оригинал статьи был взят с сайта html5.by

• 2.86
• 1
• 2
• 3
• 4
• 5

Голосов: 1026 | Просмотров: 6467

Стилизация текста-заполнителя с помощью CSS

Используйте псевдоэлемент ::placeholder для стилизации текста-заполнителя в элементе формы или </code>. Большинство современных браузеров поддерживают это, но для более старых браузеров потребуются префиксы поставщиков. </p> <p> HTML </p> <ul> <li> Префиксы поставщиков <ul> <li> Псевдоэлементы и псевдоклассы </li> <li> Firefox Placeholder Непрозрачность по умолчанию </li> <li> CSS-обработка недопустимых селекторов </li> </ul> </li> <li> Supported Styles </li> <li> Accessibility Concerns </li> <li> Automatically Add Vendor-Prefixes </li> <li> Community Input </li> <li> Resources </li> </ul> <h3><span class="ez-toc-section" id="Vendor_Prefixes"> Vendor Prefixes </span></h3> <p> So the syntax I used is supported by most modern browsers: </p> <p> But for some browsers or более старые браузеры, вам нужно будет использовать префиксы поставщиков.<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/rumahinspirasi.com/wp-content/uploads/2018/06/placeholder-768x512.png' /><noscript><img loading='lazy' src='/800/600/http/rumahinspirasi.com/wp-content/uploads/2018/06/placeholder-768x512.png' /></noscript> </p> <p> Ого! Я знаю, это огромный список. И вы можете заметить довольно много различных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит. </p> <h4><span class="ez-toc-section" id="i-5"> Псевдоэлемент против псевдокласса </span></h4> <p> Вы могли заметить, что я использую двойное двоеточие <code> :: </code> . Это называется псевдоэлементом, и он был введен в CSS3. Если бы мы использовали одно двоеточие <code> : </code> , это было бы псевдоклассом. </p> <p> Поскольку псевдоэлемент <code> :: </code> был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. В то время как псевдокласс <code> : </code> был введен ранее (в CSS1 и CSS2). Вот почему его поддерживает гораздо больше браузеров, включая Internet Explorer. </p> <p> Таким образом, в нашем префиксе поставщика <code> ::placeholder </code> вы будете использовать смесь псевдокласса и псевдоэлемента. </p> <h4><span class="ez-toc-section" id="Firefox_Placeholder"> Firefox Placeholder Непрозрачность по умолчанию </span></h4> <p> Хорошо, что там с непрозрачностью <code>: 1 </code> для Firefox.<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/https/xn--90abhccf7b.xn--p1ai/800/600/http/i.pinimg.com/originals/e5/e7/9c/e5e79c5c56a69dd965a94f5393b330b4.png' /><noscript><img loading='lazy' src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/http/i.pinimg.com/originals/e5/e7/9c/e5e79c5c56a69dd965a94f5393b330b4.png' /></noscript> Это потому, что по умолчанию к заполнителям Firefox применяется значение непрозрачности. Итак, чтобы переопределить это, нам нужно установить его. Таким образом, наш текст-заполнитель будет отображаться и не будет выглядеть блеклым, как в настройках Firefox по умолчанию. </p> <h4><span class="ez-toc-section" id="CSS-2"> CSS-обработка недопустимых селекторов </span></h4> <p> Итак, вы также можете подумать, почему мы просто не сгруппировали все префиксы поставщиков вместе следующим образом: </p> <p> Ну, это потому, что в CSS3 было правило, которое гласит: </p> <blockquote> <p> группа селекторов, содержащих недопустимый селектор, является недопустимым. </p> </blockquote> <p> Давайте рассмотрим пример, чтобы понять, что это значит. Вот допустимый селектор CSS </p> <p> Таким образом, в нашем HTML это будет выглядеть так, как ожидалось </p> <p> Но что произойдет, если мы добавим недопустимый селектор CSS </p> <p> Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стиль не будет применяться. </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/736x/1c/a6/f5/1ca6f5c90304ea111bc1e8638b9da7ab.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/1c/a6/f5/1ca6f5c90304ea111bc1e8638b9da7ab.jpg' /></noscript> В противном случае вся группа будет игнорироваться всеми браузерами. </p> <p> ⭐️ <strong> НО! </strong> похоже, это можно изменить в CSS4. </p> <blockquote> <p> Как правило, если в цепочке или группе селекторов есть недопустимый псевдоэлемент или псевдокласс, весь список селекторов недействителен. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, начиная с Firefox 63, браузеры Blink, Webkit и Gecko предполагают, что он действителен, не делая недействительным список селекторов. </p> </blockquote> <p> Подробнее об этом читайте в статье Криса Койера «Один неверный псевдоселектор равен целому игнорируемому селектору» <code> фон </code> свойства </li> <li> <code> цвет </code> </li> <li> <code> шрифт </code> свойства </li> <li> <code> интервал между буквами </code> </li> <li> <code> высота строки </code> </h2> </h2>0004 </li> <li> <code> Текстовое декорация </code> </li> <li> <code> Текст-интент </code> </li> <li> <code> Текст-трансформ </code> </li> <li> <code> Вертикальный ALIGN </code> </li> <li> <code> СКАЗАНИЯ </code> </li> </p> </li> <li> <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/i.stack.imgur.com/epC6Z.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/epC6Z.png' /></noscript> СКАЗАНИЯ </code> </li> </p> </li> <li> <code>. . Но мне нужно указать на кое-что действительно важное: текст-заполнитель не заменяет элемент метки, <code> <label> </code> !! Я грешил этим, когда впервые попал в веб-программирование 🙁. Когда ваша форма опирается исключительно на инструкции-заполнители без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для улучшения взаимодействия с пользователем. И, в конечном итоге, создание лучшего веб-сайта или веб-приложения 💪 </p> <p> Вот действительно потрясающая статья о проблемах использования только заполнителей без каких-либо меток. Ниже приведены 3 верхних пункта: </p> <ol> <li> Поскольку текст-заполнитель исчезает в природе, он может напрягать кратковременную память вашего пользователя </li> <li> Без меток пользователи не могут проверить свою работу перед отправкой формы. </li> <li> Когда появляются сообщения об ошибках, люди не знают, как решить проблему. </li> </ol> <h3><span class="ez-toc-section" id="i-6"> Автоматическое добавление префиксов поставщиков </span></h3> <p> Если вы не хотите иметь дело со всеми префиксами поставщиков, вы можете использовать PostCSS с плагином Autoprefixer.<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> Этот плагин будет анализировать ваш CSS и добавлять префиксы поставщиков. </p> <ul> <li> <em> @edufurlongo: </em> Также, используйте <code> непрозрачность: 1 </code>, потому что большинство браузеров применяют альфа (обычно 0,5) к заполнителям </li> </ul> <h3><span class="ez-toc-section" id="i-7"> Ресурсы </span></h3> <ul> <li> MDN Webs: Placeholder <li> <li> <ul> <li> MDN Webs: Placeholder <li> <li> <ul> <li> MDN Webs: Placeholder <li> <li> <ul> <li> MDN. Хитрости: заполнитель </li> <li> CSS-трюки: один неверный псевдоселектор равен целому игнорируемому селектору </li> <li> Переполнение стека: изменение цвета заполнителя ввода HTML5 с помощью CSS </li> <li> Заполнители в полях формы вредны </li> </ul> <h2><span class="ez-toc-section" id="placeholder_CSS"> ::placeholder в CSS — Темы масштабирования </span></h2> <h3 level="2"><span class="ez-toc-section" id="i-8"> Обзор </span></h3> <p> <strong> Селекторы </strong> — это шаблоны в CSS, которые используются для выбора элементов, которые вы хотите стилизовать. Селектор CSS::placeholder — это псевдоэлемент, который позволяет выбирать компоненты с текстом-заполнителем и стилизовать их.<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/dcqul81ena-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/image-2.png' /><noscript><img loading='lazy' src='/800/600/http/dcqul81ena-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/image-2.png' /></noscript> Свойство заполнителя указывает подсказку, объясняющую предполагаемое значение поля ввода, которое используется для установки текста заполнителя <strong> </strong> . Эта статья CSS о цвете-заполнителе содержит синтаксис и примеры использования селектора CSS::placeholder. </p> <h3 level="2"><span class="ez-toc-section" id="i-9"> Область применения статьи </span></h3> <p> В этом руководстве мы рассмотрим следующие темы: </p> <ul> <li> Сначала мы обсудим, что такое CSS-заполнитель и его синтаксис. </li> <li> Затем с помощью примеров мы рассмотрим его использование и различные способы его использования. </li> <li> В последнем мы увидим, как изменить цвет заполнителя и поддерживаемые им стили. </li> </ul> <h3 level="2"><span class="ez-toc-section" id="i-10"> Введение </span></h3> <ul> <li> В псевдоэлементе CSS селектор заполнителя используется для настройки текста-заполнителя путем изменения цвета текста и стиля текста. Псевдоэлемент ::first-line — это единственное подмножество свойства CSS, которое применимо и может использоваться в правиле с selector::placeholder. </li> <li> </li> <li> Селектор::placeholder создает компоненты формы с текстом-заполнителем и позволяет настраивать их.<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/e4/03/68/e40368aea58a675d97cc4dea17bacda6.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/e4/03/68/e40368aea58a675d97cc4dea17bacda6.jpg' /></noscript> Текст заполнителя по умолчанию отображается прозрачным или светло-серым цветом для большинства браузеров. </li> <li> Свойство заполнителя задает подсказку, объясняющую предполагаемое значение поля ввода, которое используется для установки текста заполнителя. </li> </ul> <h3 level="2"><span class="ez-toc-section" id="i-11"> Использование </span></h3> <ul> <li> Если текст-заполнитель имеет достаточную цветовую контрастность, его можно считать печатным вводом. Текст-заполнитель также исчезнет, ​​когда пользователь вставит содержимое в элемент. Оба эти фактора могут затруднить успешное заполнение формы, особенно для людей с когнитивными проблемами. </li> </ul> <ul> <li> Другой способ предоставления информации-заполнителя состоит в том, чтобы добавить ее за пределы ввода в непосредственной близости, а затем использовать aria-describedby для программной связи с ее предложением. </li> </ul> <ul> <li> Содержимое подсказки <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/i.stack.imgur.com/HsX4F.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/HsX4F.jpg' /></noscript> Большинство программ для чтения с экрана будет использовать aria-describedby для чтения подсказки после объявления текста метки ввода, и пользователь может отключить его, если сочтет дополнительную информацию ненужной. </li> <li> Атрибут <strong> aria-describedby </strong> содержит список идентификаторов элементов, описывающих объект. Он обеспечивает связь между виджетами или группами и поясняющим их текстом. Элементы управления формы — не единственные, которые могут использовать атрибут aria-described by. Его также можно использовать для связывания статического текста с виджетами, группами элементов, областями с заголовками, определениями и другими элементами. </li> </ul> <p> <strong> Синтаксис: </strong> </p><pre> <pre> ::заполнитель { // CSS-свойство } </pre></pre> <p> <strong> Пример: </strong> В этом примере мы рассмотрим, как использовать селектор the::placeholder для создания текста-заполнителя с атрибутом, указывающим подсказку, определяющую предполагаемое значение поля ввода.<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><pre> <pre> <!DOCTYPE html> <!ДОКТИП HTML> <html> <голова> <title>::селектор заполнителя</title> <стиль> тело { text-align: center /*Это выровняет текст тега body по центру*/ } ввод:: заполнитель { цвет фона: белый; /*Это применит белый цвет фона заполнителя*/ цвет: серый; /*Это установит серый цвет текста-заполнителя*/ выравнивание текста: по центру; /*Это выровняет текст заполнителя по центру*/ } </стиль> </голова> <тело> Селектор <h3><span class="ez-toc-section" id="placeholder">::placeholder </span></h3> <p> имя пользователя: <input type="text" placeholder="username"> </p> <p> пароль: <input type="password" placeholder="password"></p> <p> идентификатор электронной почты: <input type="email" placeholder="email"></p> <p> телефон: <input type="tel" placeholder="123-45-678"> </p> <тип ввода="отправить"> </тело> </html> </pre></pre> <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/i.stack.imgur.com/KjLzt.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/KjLzt.png' /></noscript> </p> <p> <strong> Поддерживаемые стили: </strong> </p> <p> Псевдоэлемент поддерживает стиль этих свойств: </p> <p/> <table> <thead> <tr> <th> Свойства </th> <th> Описание </th> </tr> </thead> <tbody> <tr> <td> <strong> вертикальное выравнивание: </strong> </td> <td> Свойство CSS vertical-align определяет, как компоненты на линии выравниваются друг с другом. </td> </tr> <tr> <td> <strong> color: </strong> </td> <td> Свойство CSS color используется для изменения цвета текста, фона веб-страницы и цвета границ. </td> </tr> <tr> <td> <strong> свойства фона: </strong> </td> <td> Свойство фона CSS используется для определения эффектов фона на элементе. Это сокращенное свойство, которое означает, что вы можете написать множество свойств CSS в одном. </td> </tr> <tr> <td> <strong> word-spacing: </strong> </td> <td> Это свойство CSS используется для указания расстояния между словами. Мы можем изменить расстояние между словами, используя эту функцию. Большое отрицательное или положительное значение интервала между словами сделает слово нечитаемым.<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/img.youtube.com/vi/HHhC67Gtalo/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/img.youtube.com/vi/HHhC67Gtalo/hqdefault.jpg' /></noscript> Если мы используем очень большое положительное значение, мы увидим слова, которые выглядят как последовательность несвязанных и отдельных слов. Очень большое отрицательное значение приведет к перекрытию слов, что сделает слово узнаваемым. </td> </tr> <tr> <td> <strong> line-height: </strong> </td> <td> Свойство CSS line-height определяет наименьшую высоту строчных блоков внутри элемента. Он различает две линии вашего материала. Он указывает, сколько места осталось над и под встроенными элементами. </td> </tr> <tr> <td> <strong> text-decoration: </strong> </td> <td> Сокращенное свойство CSS text-decoration определяет, как декоративные линии отображаются в тексте. Он выделяет выделенный текст с помощью подчеркивания, надчеркивания, зачеркивания или комбинации строк. </td> </tr> <tr> <td> <strong> свойства шрифта: </strong> </td> <td> Свойство CSS Font используется для настройки внешнего вида текста. Вы можете изменить размер текста, цвет, стиль и многое другое, используя свойство шрифта CSS.<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/ZOOKb.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/ZOOKb.png' /></noscript> </td> </tr> <tr> <td> <strong> text-transform: </strong> </td> <td> Свойство CSS text-transform описывает, как сделать текст элемента заглавным. Его можно использовать, чтобы текст выглядел полностью прописным, строчным или заглавным в каждом слове. </td> </tr> <tr> <td> <strong> letter-spacing: </strong> </td> <td> Свойство CSS letter-spacing определяет расстояние между буквами текста по горизонтали. При рендеринге текста это значение применяется к естественному промежутку между символами. Положительные значения межбуквенного интервала приводят к тому, что символы расходятся дальше друг от друга, тогда как отрицательные значения межбуквенного интервала сближают символы. </td> </tr> <tr> <td> <strong> text-indent: </strong> </td> <td> CSS-свойство text-indent определяет величину отступа перед строками текста в блоке. </td> </tr> <tr> <td> <strong> opacity: </strong> </td> <td> CSS-атрибут opacity определяет прозрачность элемента. Непрозрачность — это степень, в которой скрыто содержимое позади элемента, и это обратная сторона прозрачности.<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/img.youtube.com/vi/jWCXc32OIUY/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/img.youtube.com/vi/jWCXc32OIUY/hqdefault.jpg' /></noscript> </td> </tr> </tbody> </table> <h3 level="2"><span class="ez-toc-section" id="_CSS"> Как изменить цвет заполнителя CSS? </span></h3> <p> <strong> Шаг 1) </strong> Вставка HTML: </p> <p> Вставка элемента ввода с атрибутом заполнителя. </p> <p> <strong> Шаг 2) </strong> Включить CSS: </p> <p> В большинстве браузеров текст-заполнитель отображается серым цветом. Чтобы изменить это, используйте селектор non-standard::placeholder для стиля заполнителя. Так как Firefox присваивает более низкую непрозрачность заполнителю, мы используем opacity: 1 для компенсации. </p> <p> <strong> Пример 1: </strong> В этом примере мы обсудим, как использовать селектор the::placeholder для разных браузеров, поскольку совместимость селектора заполнителя различается для разных браузеров. </p><pre> <pre> <!DOCTYPE html> <html> <голова> <meta name="viewport" content="width=device-width, initial-scale=1"> <стиль> ::заполнитель { Цвет синий; непрозрачность: 1; /* Fire Fox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ цвет синий; } ::-ms-input-placeholder { /* Microsoft Edge */ цвет синий; } </стиль> </голова> <тело> <p>Изменить цвет заполнителя:</p> <input type="text" placeholder="Синий текст-заполнитель.<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/yuBpM.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/yuBpM.png' /></noscript> ."> </тело> </html> </pre></pre> <p> <strong> Выход: </strong> </p> <p> <strong> Примечание: </strong> Текст заполнителя по умолчанию светло-серый в большинстве браузеров. </p> <p> <strong> Пример 2: </strong> В этом примере мы собираемся задать стиль заполнителя по умолчанию для входного тега. Вы можете изменить свойства текста-заполнителя и сделать его более привлекательным для пользователя. </p><pre> <pre> <!DOCTYPE html> <html> <голова> <meta name="viewport" content="width=device-width, initial-scale=1"> <стиль> ::заполнитель { Цвет синий; /*Применяет синий цвет к тексту*/ непрозрачность: 1; /*Свойство Opacity установлено в 1, т.е. текст будет хорошо виден*/ размер шрифта: 1.2em; /*Используется для изменения размера шрифта*/ семейство шрифтов: курсив; /*Используется для изменения стиля шрифта*/ } </стиль> </голова> <тело> <p>Изменить цвет заполнителя:</p> <input type="text" placeholder="Введите здесь…"> </тело> </html> </pre></pre> <p> <strong> Выход: </strong> </p> <h3 level="2"><span class="ez-toc-section" id="i-12"> Проблемы с доступностью заполнителей </span></h3> <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/line25.com/wp-content/uploads/2011/form/css2.png' /><noscript><img loading='lazy' src='/800/600/http/line25.com/wp-content/uploads/2011/form/css2.png' /></noscript> Хотя программное обеспечение специальных возможностей и современные браузеры улучшаются, предстоит еще долгий путь. Ниже приведены три наиболее серьезные проблемы с доступностью: </p> <ol> <li> <strong> Светло-серый цвет текста-заполнителя по умолчанию </strong> плохо контрастирует с большинством фонов. Плохая цветовая контрастность затрудняет чтение текста слабовидящими людьми. Это сложная проблема, потому что не все браузеры позволяют изменять текст-заполнитель с помощью CSS. </li> <li> <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/digiseller.ru/preview/795284/p1_2651984_0b4f3845.jpg' /><noscript><img loading='lazy' src='/800/600/http/digiseller.ru/preview/795284/p1_2651984_0b4f3845.jpg' /></noscript> </li> <li> <strong> Некоторые программы чтения с экрана могут не читать вслух текст-заполнитель. </strong> Если их программное обеспечение не озвучивает заполнитель, слепые или слабовидящие пользователи могут полностью пропустить подсказку. </li> </ol> <h3 level="2"><span class="ez-toc-section" id="i-13"> Совместимость с браузерами </span></h3> <p> Селектор CSS ::placeholder на базовом уровне поддерживается следующими браузерами: </p> <ul> <li> Google Chrome 4.0 </li> <li> Microsoft Edge 10.0 </li> <li> Firefox 4.0 </li> <li> Сафари 5.0 </li> <li> Опера 15.0 </li> </ul> <p> <strong> Примечание: </strong> За исключением Internet Explorer, все основные браузеры поддерживают атрибут заполнителя. </p> <h3 level="2"><span class="ez-toc-section" id="i-14"> Заключение </span></h3> <ul> <li> Текст-заполнитель элемента формы можно настроить с помощью псевдоэлемента ::placeholder (или, в некоторых случаях, псевдокласса, в зависимости от реализации браузера). Как и любой псевдоэлемент, вы можете при необходимости ограничить его определенными элементами. </li> <li> В этой статье были рассмотрены основы селектора CSS::placeholder и способы использования CSS::placeholder с примерами.<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/assets.materialup.com/uploads/d6795894-7362-434a-8d10-f1d055a4eecf/preview.png' /><noscript><img loading='lazy' src='/800/600/http/assets.materialup.com/uploads/d6795894-7362-434a-8d10-f1d055a4eecf/preview.png' /></noscript> Теперь вы готовы использовать селектор ::placeholder как профессионал CSS <strong>! </strong> </li> </ul> <h2><span class="ez-toc-section" id="_-_HTML5_CSS_input_and_textarea"> Стилизация текста-заполнителя HTML5 с помощью CSS [input and textarea] </span></h2> <p> До HTML5 существовал XHTML1, а до него — HTML4. Заполнители, какими мы их знаем сегодня, были в XHTML1 и HTML4, смоделированные с помощью JavaScript. Стилизовать эти смоделированные заполнители было легко, потому что они на самом деле были входными значениями. Теперь, когда заполнители интегрированы в HTML5, эти заполнители JavaScript являются излишними, но стилизация этих заполнителей HTML5 стала намного сложнее, чем стилизация заполнителей JavaScript, особенно если вы хотите, чтобы стили заполнителей HTML5 применялись в разных браузерах. Этот учебник покажет вам, как именно стилизовать текст-заполнитель HTML5, используя только CSS, для обоих элементов ввода как элементов textarea. Прежде чем использовать какой-либо из приведенных ниже фрагментов кода, важно знать, что основные браузеры, такие как Chrome, FireFox, Safari, Opera и Internet Explorer/Edge, используют разные шаблоны для стилизации заполнителей ввода и заполнителей текстовой области.<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/oDEVf.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/oDEVf.png' /></noscript> </p> <h3><span class="ez-toc-section" id="_HTML5"> Создайте поле ввода HTML5 и текстовую область с заполнителем </span></h3> <p> Давайте сначала покажем разметку HTML5, необходимую для создания поля ввода и поля текстовой области, которые содержат текст-заполнитель. В обоих приведенных ниже полях будет текст примера заполнителя, к которому будет применен стиль браузера по умолчанию, предоставляемый используемым вами браузером: </p> <p data-readability-styled="true"> Введите HTML: </p> <p> <input type="text" placeholder="Введите пример заполнителя" > </p> <p> Textarea HTML: </p> <p> <textarea placeholder="Textarea Example Placeholder">< /textarea> </p> <h3><span class="ez-toc-section" id="_-_HTML5_CSS"> Стилизация текста-заполнителя HTML5 с помощью CSS </span></h3> <p> Как было сказано ранее, каждый из основных браузеров использует разные шаблоны для стилизации ввода и заполнителей текстовой области. Поэтому нам нужно создать отдельное правило CSS для каждого браузера.<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='' /><noscript><img loading='lazy' src='' /></noscript> У вас есть выбор: настроить таргетинг на все заполнители на вашем веб-сайте одновременно, только на определенные элементы, только на определенные элементы формы, только на определенные типы ввода, только на те входные данные, которые содержат заполнитель, только на целевые элементы, содержащие определенный класс, или только на таргетинг элементы, содержащие определенный идентификатор. Ниже вы найдете правила CSS для всех различных вариантов таргетинга: </p> <p> Цель <strong> каждый </strong> текст заполнителя: </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Цель <strong> каждый ввод </strong> текст-заполнитель: </p> <p> input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> input:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> input:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Цель <strong> для каждой текстовой области </strong> текст заполнителя: </p> <p> textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> textarea:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> textarea:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Целевые тексты-заполнители из <strong> все входные данные определенного типа </strong> : </p> <p> input[type="text"]::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> input[type="text"]:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> input[type="text"]:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Целевые тексты-заполнители из всех входных данных <strong>, которые имеют атрибут-заполнитель </strong> : </p> <p> input[placeholder]::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> input[placeholder]:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[placeholder]::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[placeholder]:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> input[placeholder]:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Цель <strong> элементов формы с определенным классом </strong> (класс в этом примере: «имя класса»): </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='' /><noscript><img loading='lazy' src='' /></noscript> classname::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> .classname:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> .classname::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> .classname:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> .classname:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Целевые <strong> элементов формы с определенным идентификатором </strong> (идентификатор в этом примере: «idname»): </p> <p> #idname::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> #idname:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> #idname::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> #idname:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> #idname:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Приведенные выше правила CSS показывают, что существует два способа нацеливания на вводимые тексты и текстовые поля-заполнители: с помощью псевдоэлементов (::) и псевдоклассов (:).<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='' /><noscript><img loading='lazy' src='' /></noscript> Различные основные браузеры поддерживают псевдоэлементы или псевдоклассы, но они никогда не поддерживают и то, и другое, что делает важным использование каждого из приведенных выше правил CSS для применения желаемых стилей в каждом браузере. Список поддерживаемых свойств CSS для псевдо- элементы становятся все больше и больше, они перечислены ниже. Имейте в виду, что приведенные ниже свойства CSS в основном не работают с псевдоклассами, потому что псевдоклассы просто не поддерживают многие свойства CSS. </p> <h3><span class="ez-toc-section" id="_CSS-2"> Поддерживаемые свойства CSS для заполнителей </span></h3> <p> Следующие свойства CSS для псевдоэлементов (::) поддерживаются большинством основных браузеров: </p> <ul> <li> цвет </li> <li> межсловный интервал </li> <li> межбуквенный интервал </li> <li> вертикальное выравнивание </li> <li> высота строки </li> <li> padding-свойства </li> <li> свойства шрифта </li> <li> свойства текста </li> <li> свойства границ </li> <li> свойства фона </li> <li> свойства позиции </li> <li> свойства преобразования </li> <li> opacity — FireFox автоматически уменьшает непрозрачность заполнителя, поэтому вам нужно добавить opacity:1; (как вы можете видеть в приведенных выше примерах).<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> </li> </ul> <p>   </p> <h3><span class="ez-toc-section" id="i-15"> Важно! Также стилизуйте тексты ввода и текстовой области, а не только заполнители. Как только вы начнете вводить текст в поле ввода или текстовой области, появится текст ввода/текстовой области, и к этим текстам будут применены стили браузера по умолчанию. Поэтому всегда убедитесь, что вы сначала стилизуете обычный текст ввода и текстовую область, а затем стилизуете заполнители. Например: </span></h3> </p> <p data-readability-styled="true"> ввод, текстовая область{<br/> цвет: #123456; /* Это добавит цвет к тексту ввода и текстовой области */ <br/> } </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <h3><span class="ez-toc-section" id="i-16"> Заполнитель слишком велик для поля ввода? </span></h3> <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/vladmaxi.net/uploads/2013/05/Prefix-and-Postfix-Example.jpg' /><noscript><img loading='lazy' src='/800/600/http/vladmaxi.net/uploads/2013/05/Prefix-and-Postfix-Example.jpg' /></noscript> Это может произойти с полями ввода по умолчанию, а также когда макет нарушает адаптивное поведение, а ширина полей ввода уменьшается, что приводит к тому, что текст-заполнитель больше, чем ширина ввода. Чтобы решить эту проблему, убедитесь, что вы добавили text-overflow:ellipsis; к тексту-заполнителю, чтобы часть текста-заполнителя, которая не помещается в поле ввода, была обрезана. Используйте следующие правила CSS, чтобы применить это: </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> переполнение текста: многоточие; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> переполнение текста: многоточие; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> переполнение текста: многоточие; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> переполнение текста: многоточие; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> переполнение текста: многоточие; <br/> } </p> <h3><span class="ez-toc-section" id="i-17"> Отключение заполнителя при нажатии (фокусе) на поле ввода или текстовой области </span></h3> <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/img.idesign.vn/1920x-/2019/01/13/6.png' /><noscript><img loading='lazy' src='/800/600/http/img.idesign.vn/1920x-/2019/01/13/6.png' /></noscript> Чтобы убедиться, что текст заполнителя исчезает, как только вы нажмете/сосредоточитесь на вводе или текстовой области, сделайте цвет текста заполнителя прозрачным. Следующие правила CSS полностью скроют текст заполнителя при фокусе/щелчке: </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: прозрачный; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: прозрачный; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: прозрачный; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: прозрачный; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: прозрачный; <br/> } </p> <h3><span class="ez-toc-section" id="i-18"> Совместимость с браузерами-заполнителями </span></h3> <p> Заполнители HTML5 поддерживаются последними версиями всех основных браузеров. Приведенные ниже правила CSS предназначены для всех современных основных браузеров и максимально старых браузеров, но есть ограничения.<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/kursuswebdesign.org/wp-content/uploads/2015/11/css5.png' /><noscript><img loading='lazy' src='/800/600/http/kursuswebdesign.org/wp-content/uploads/2015/11/css5.png' /></noscript> Возьмем, к примеру, старые версии Internet Explorer (IE9 и старше), которые вообще не поддерживают заполнители, или старые версии Opera, которые не поддерживают селекторы CSS для заполнителей. Если вы убедитесь, что используете все следующие правила CSS, тексты-заполнители будут отлично смотреться во всех основных браузерах и в большинстве старых браузеров: </p> <p> ::-webkit-input-placeholder — WebKit, Blink, Edge <br/> :-moz-placeholder — Mozilla Firefox 4–18 <br/> ::-moz-placeholder — Mozilla Firefox 19+ <br/> :-ms-input-placeholder — Интернет Explorer 10-11 <br/> :placeholder-show — Стандартный псевдокласс </p> <p> Некоторые браузеры уже поддерживают новые типы ввода HTML5, такие как «email», «url» или «tel». Не все браузеры поддерживают эти новые типы ввода, и если они их не поддерживают, эти типы ввода будут автоматически преобразованы в тип ввода «текст». Среди браузеров, которые поддерживают эти новые типы ввода HTML5, есть браузеры, которые поддерживают эти типы ввода, но добавляют некоторый дополнительный CSS по умолчанию, который будет отображать эти вводы странным образом.<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/kursuswebdesign.org/wp-content/uploads/2015/10/css410.jpg' /><noscript><img loading='lazy' src='/800/600/http/kursuswebdesign.org/wp-content/uploads/2015/10/css410.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/input-czvet-placeholder-placeholder-css-mdn.html" data-text="Input цвет placeholder: ::placeholder — CSS | MDN" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/raznoe-2/input-czvet-placeholder-placeholder-css-mdn.html" data-text="Input цвет placeholder: ::placeholder — CSS | MDN" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/raznoe-2/input-czvet-placeholder-placeholder-css-mdn.html" data-text="Input цвет placeholder: ::placeholder — CSS | MDN" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/raznoe-2/input-czvet-placeholder-placeholder-css-mdn.html" data-text="Input цвет placeholder: ::placeholder — CSS | MDN" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/raznoe-2/kak-mozhno-zarabotat-shkolniku-kak-zarabotat-dengi-shkolniku.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Как можно заработать школьнику: Как заработать деньги школьнику</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/firefox-instrumenty-razrabotchika-obzor-instrumentov-razrabotki-v-brauzerah-izuchenie-veb-razrabotki.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Firefox инструменты разработчика: Обзор инструментов разработки в браузерах — Изучение веб-разработки</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/input-czvet-placeholder-placeholder-css-mdn.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 *

Сайт