Как изменить цвет placeholder
Перейти к содержимому

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

  • автор:

Цвет замещающего текста

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

Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы, как показано в примере 1.

Пример 1. Использование placeholder

HTML5 CSS 2.1 IE Cr Op Sa Fx

    placeholder body input[type="search"]  

Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder .

В Safari и Chrome стиль текста меняется следующим образом.

Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).

Пример 2. Цвет текста

HTML5 CSS3 IE Cr Op Sa Fx

    placeholder body input[type="search"] < padding: 3px; background: #333; color: #053f38; border: 1px solid #ccc; >input[type="search"]::-webkit-input-placeholder < color: #ccc; >input[type="search"]::-moz-placeholder  

Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.

Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.

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

Как известно, буквально несколько лет назад в браузерах появилась интересная возможность устанавливать для текстовых полей input на веб-страницах какие-то текстовые значение по умолчанию.

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

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

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

13-04-2014 12-17-26

Чтобы понять, как это делается, посмотрите на следующий пример:

::-webkit-input-placeholder < /* WebKit browsers */ color: red; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: red; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: red; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: red; >

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

: : placeholder

Псевдоэлемент : : placeholder используется для стилизации текста-подсказки (плейсхолдера) в полях ввода и .

Пример

Скопировать ссылку «Пример» Скопировано

  input class="form-input" type="email" placeholder="Например: mygre@ema.il">      
 .form-input::placeholder  color: gray;> .form-input::placeholder  color: gray; >      

Как понять

Скопировать ссылку "Как понять" Скопировано

Как пишется

Скопировать ссылку "Как пишется" Скопировано

Два двоеточия и ключевое слово placeholder .

Стиль применится ко всем подсказкам на странице:

 ::placeholder  color: gray;> ::placeholder  color: gray; >      

Стиль применится только к подсказкам у полей ввода с классом email - input :

 .email-input::placeholder  color: darkblue;> .email-input::placeholder  color: darkblue; >      

Подсказки

Скопировать ссылку "Подсказки" Скопировано

�� Для стилизации подсказки можно использовать только следующие свойства:

  • все шрифтовые свойства, начинающиеся с font (например, font - size или font - style );
  • все свойства для работы с фоном, начинающиеся с background - (например, background - color или background - size );
  • свойство color ;
  • свойства word - spacing , letter - spacing , text - decoration , text - transform и line - height ;
  • свойства text - shadow , группу свойств text - decoration и vertical - align .

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

�� Желательно стилизовать подсказку таким образом, чтобы визуально она отличалась от введённого текста. Как правило, её делают полупрозрачной, либо просто светлее вводимого текста.

Задать цвет плейсхолдеру (placeholder)

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

Рассмотрим такой вариант input’а:

Для изменения цвета placeholder пропишем такие правила в наш CSS:

/* Chrome, Firefox, Opera, Safari 10.1+ */ ::placeholder < color: red; opacity: 1; >/* Internet Explorer 10-11 */ :-ms-input-placeholder < color: red; >/* Microsoft Edge */ ::-ms-input-placeholder

Рабочий пример кода с изменением цвета для placeholder в input:

В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке,…

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код…

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *