Оформление placeholder css. Добавляем CSS стиль для placeholder. Задача: сделать свой css стиль для placeholder

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

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

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот - это атрибут 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 применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

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

html

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

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

Нужно сказать, что поддерживаются не все возможные 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 {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;} Как скрыть placeholder при фокусе?

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

в некоторых браузерах при получении фокуса инпутом

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

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

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

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

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

Атрибут 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, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью 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; }

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

АВТОМИР