У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие - вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:
- изменение стиля плейсхолдера;
- скрытие сразу при нажатии на поле;
- отображение в браузерах, которые не поддерживают атрибут.
Для примера возьмём текстовое поле input и будем применять к нему стили.
Изменение цвета placeholderБраузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.
::-webkit-input-placeholder {color:#f00; opacity:1;}/* webkit */ ::-moz-placeholder {color:#f00; opacity:1;}/* Firefox 19+ */ :-moz-placeholder {color:#f00; opacity:1;}/* Firefox 18- */ :-ms-input-placeholder {color:#f00; opacity:1;}/* IE */Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.
Input-1::-webkit-input-placeholder { color:red; } .input-2::-webkit-input-placeholder { color:green; } ... и.т.д.
Убираем 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 */Скрывать плейсхолдер при форкусе можно по разному, например, плавно изменяя прозрачность или цвет. А можно настроить и css анимацию, когда подсказка будет плавно уезжать за пределы поля. Всё это возможно благодаря CSS, но большого смысла я в этом не вижу, так как кроссбраузерность таких прелестей будет страдать, а пользы от этих эффектов практически никакой.
Кроссбраузерность placeholderУстаревшие браузеры не поддерживают атрибут «placeholder» - он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть "люди" которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.
Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.
Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:
$(function(){ $("input, textarea").placeholder(); }); input.placeholder, textarea.placeholder. { color: green; }
Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.
Если вы не знакомы с атрибутом 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 у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. 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, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на jsFiddle или чуть ниже:
Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.
Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.
Где находится плейсхолдер?Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный ::placeholder. С его помощью можно управлять свойствами подсказки.
Стилизация 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-color), но и изображение (background-image).
- цвет текста - color;
- прозрачность - opacity;
- подчеркивание, надчеркивание или зачеркивание - text-decoration;
- регистр - text-transform;
- внутренние отступы - padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
- отображение шрифта - свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
- вертикальное выравнивание в строке - vertical-align;
- обрезка текста при переполнении контейнера - text-overflow.
По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.
Input:focus::placeholder { color: transparent; }
В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.
Input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }
В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.
Атрибут 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 ; }
