Оформление placeholder css. Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS? Стилизация: изменить цвет placeholder CSS

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот - это атрибут 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; }

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

Плохо

Хорошо

Стилизация: изменить цвет placeholder CSS .raz::placeholder { color: red; opacity: 1; /* сделать обычным неполупрозрачным цветом в Firefox */ } Поменять стиль поля ввода с placeholder CSS

Плохо

Эффект placeholder для

Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable .

.raz { height: 3em; border: 1px solid; } .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { /* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ content: attr(data-placeholder); opacity: .5; } Древний метод на память, изменяющий value JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Где находится плейсхолдер?

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

You will be interested:

Стилизация placeholder на CSS выглядит так:

input::placeholder { color: red; opacity: 1; font-style: italic; }

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

Псевдоэлемент CSS placeholder хорошо обрабатывается всеми современными браузерами, а для поддержки старых обозревателей можно воспользоваться префиксами:

• ::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);
• ::-moz-placeholder - для браузеров Firefox выше 19 версии;
• :-moz-placeholder - для старых Firefox;
• :-ms-input-placeholder - для Internet Explorer выше 10 версии.

Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.

Возможности стилизации

Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

• фон - группа background-свойств. Фон блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
• цвет текста - color;
• прозрачность - opacity;
• подчеркивание, надчеркивание или зачеркивание - text-decoration;
• регистр - text-transform;
• внутренние отступы - padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
• отображение шрифта - свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
• вертикальное выравнивание в строке - vertical-align;
• обрезка текста при переполнении контейнера - text-overflow.

Input1::placeholder { background-image: linear-gradient(lime, blue); color: white; } .input2::placeholder { text-decoration: line-through; color: purple; font-weight: bold; } .input3::placeholder { font-size: 16px; letter-spacing: 10px; } .input4::placeholder { background: brown; color: white; text-overflow: ellipsis; }

В фокусе

По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но псевдоэлемент CSS placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.

input:focus::placeholder { color: transparent; }

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

input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }

В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.

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

Итак, цвет текста нашего placeholder-а можно изменить использовав, например следующий набор css-правил:

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

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

Кроме того, поддерживаются не все css свойства. Вот перечень точно поддержываемых свойств:

font (и связанные)
background (и связанные)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

Также бывает так, что текст плейсхолдера «выходит» за пределы ширины элемента input или textarea (частый случай для мобильных устройств). При этом он автоматически некрасиво обрезается.

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

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-а при фокусе */ .input ::-webkit-input-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input ::-moz-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input :-moz-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input :-ms-input-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input { opacity : 0 ; transition : opacity 0.3s ease ;} .input :focus::-moz-placeholder { opacity : 0 ; transition : opacity 0.3s ease ;} .input :focus:-moz-placeholder { opacity : 0 ; transition : opacity 0.3s ease ;} .input :focus:-ms-input-placeholder { opacity : 0 ; transition : opacity 0.3s ease ;} /* сдвиг placeholder-а вправо при фокусе*/ .input ::-webkit-input-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input ::-moz-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input :-moz-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input :-ms-input-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input :focus::-webkit-input-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} .input :focus::-moz-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} .input :focus:-moz-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} .input :focus:-ms-input-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} /* сдвиг placeholder-а вниз при фокусе*/ .input ::-webkit-input-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input ::-moz-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input :-moz-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input :-ms-input-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input :focus::-webkit-input-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;} .input :focus::-moz-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;} .input :focus:-moz-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;} .input :focus:-ms-input-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;}

На этом и закончим.