Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS? Добавляем CSS стиль для 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 и текст в нем (синий цвет для контраста в примере):

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, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:

На выходе мы получает такое поле:

Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:

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

Получаем:

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
font (так же смежные свойства)
background (так же смежные свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.

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

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

В результате получаем поле ввода такого с placeholder такого вида:

Скрываем текст при клике по полю
По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.

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

Получаем такое действо:

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

Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

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

Стилизация

Для стилизации плэйсхолдеров используются следующие правила:

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

Выглядит ужасно, не так ли? И на это есть причина - до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .

Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

@mixin placeholder { & : :- webkit-input-placeholder { @content ; } & : - moz-placeholder { @content ; } & : :- moz-placeholder { @content ; } & : - ms-input-placeholder { @content ; } }

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

// Глобально для каждого поля ввода @include placeholder { color : blue ; } // Для определённых полей ввода .input { @include placeholder { color : green ; } } Пример

Синий текст для плэйсхолдера (никогда так не делайте):

.blue-text ::-webkit-input-placeholder { color : #2e8ece ; } .blue-text :-moz-placeholder { color : #2e8ece ; } .blue-text ::-moz-placeholder { color : #2e8ece ; } .blue-text :-ms-input-placeholder { color : #2e8ece ; }

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

Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:

• font и все связанные свойства (font-size , font-family и т.д.)
• background и все связанные свойства (background-color , background-image и т.д.)
• opacity
• text-indent
• text-overflow
• color
• text-transform
• line-height
• word-spacing
• letter-spacing
• text-decoration
• vertical-align

Анимации

Идеи анимаций принадлежит блогу html5.by .

Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

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

.input { @include placeholder { // Стили для нормального состояния } & :focus { @include placeholder { // Стили после события focus } } } Изменение прозрачности .input { @include placeholder { color : #aaa ; opacity : 1 ; transition : opacity 300ms ; } & :focus { @include placeholder { opacity : 0 ; } } }

Сдвиг вправо и влево

Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

Сдвиг вниз

Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.

.input { @include placeholder { text-indent : 0px ; transition : text-indent 300ms ; } & :focus { @include placeholder { text-indent : 500px ; } } }

Всё вместе

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

@mixin placeholder { & : :- webkit-input-placeholder { @content } & : - moz-placeholder { @content } & : :- moz-placeholder { @content } & : - ms-input-placeholder { @content } } @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) { @include placeholder { text-indent : 0 ; transition : text-indent $duration ; } & :focus { @include placeholder { text-indent : if ($side == left , - $position , $position ); } } } @mixin pl-slide-down ($position : 5 , $duration : 200ms ) { @include placeholder { line-height : 1 ; transition : line-height $duration ; } & :focus { @include placeholder { line-height : $position ; } } } @mixin pl-fade-out ($duration : 200ms ) { @include placeholder { opacity : 1 ; transition : opacity $duration ; } & :focus { @include placeholder { opacity : 0 ; } } }

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

// Для отдельных элементов .pl-shift-right { @include pl-shift ( right ); } .pl-fade-out { @include pl-fade-out ; } // Для всего остального @include pl-shift ( left ); Autoprefixer

Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:

::placeholder { color : orange ; } . input : : placeholder { color : blue ; }

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

Что дальше

Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

Применять стили с помощью:placeholder-shown будет гораздо проще:

.input :placeholder-shown { color : blue ; }

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

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

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

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

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

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

::-webkit-input-placeholder {color:#000000; opacity:1;}/* webkit */
::-moz-placeholder {color:#000000; opacity:1;}/* Firefox 19+ */
:-moz-placeholder {color:#000000; opacity:1;}/* Firefox 18- */
:-ms-input-placeholder {color:#000000; opacity:1;}/* IE */

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

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

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

Убираем placeholder при нажатии на поле По умолчанию в браузерах текст из атрибута 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 */

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

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

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

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

$(function(){
$("input, textarea").placeholder();
});

input.placeholder, textarea.placeholder. { color: green; }

Placeholders, those frequently grayed out text elements inside an input, can be a pain to style. Fortunately we"ve sourced a short but effective CSS solution to style your input"s placeholder text any color and opacity you wish. Read on for the code.

Changing placeholder text color

Let"s start with a simple input and some placeholder text, for this example we"ll use the word "search" but you can use anything you want. The basic HTML is below:

HTML

Input (and textarea) placeholder text defaults to a light gray color, however, we can change that with a few lines of CSS. Here we"ll color the input text red using an HTML color name, but any color method will suffice (HEX, RGB, HSL).

CSS ::-webkit-input-placeholder { /* Chrome */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; }

Note that it"s important to include the different vendor prefixes in order to support as many browsers as possible. Only Firefox"s input placeholder text defaults to a slight transparency so its unnecessary to set the opacity property on IE or Chrome.

Changing placeholder focus text color

Alright, we"ve successfully changed the color of the placeholder text to red, but it would be nice if something happened when a user clicks inside our input. Using the same vendor prefixed CSS properties, we can alter the opacity of the input placeholder text on focus.

CSS input { outline: none; padding: 12px; border-radius: 3px; border: 1px solid black; } ::-webkit-input-placeholder { /* Chrome */ color: red; transition: opacity 250ms ease-in-out; } :focus::-webkit-input-placeholder { opacity: 0.5; } :-ms-input-placeholder { /* IE 10+ */ color: red; transition: opacity 250ms ease-in-out; } :focus:-ms-input-placeholder { opacity: 0.5; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; } :focus::-moz-placeholder { opacity: 0.5; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; } :focus:-moz-placeholder { opacity: 0.5; }

In the example above we"ve thrown in a few basic styles on the input itself, and added a transition on the opacity to make the experience just a little nicer. Check out the demo and experiment with other CSS properties and transitions.