Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder . Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис
Селектор ::placeholder { ... }
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Пример
Результат примера показан на рис. 1.
Рис. 1. Использование::placeholder
Примечание
Internet Explorer использует псевдокласс :-ms-input-placeholder .
Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .
Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .
Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .
Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом 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 CSS
Поменять стиль поля ввода с placeholder CSS
Плохо
Эффект placeholder для
Атрибут placeholder работает только для и
Древний метод на память, изменяющий value JavaScript
Если вы не знакомы с атрибутом 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; }
Получаем такое действо:
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.
Атрибут placeholder работает только для и
Древний метод на память, изменяющий value JavaScript
Если вы не знакомы с атрибутом 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; }
Получаем такое действо:
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.