Атрибут ::placeholder CSS | CSS
Псевдоэлемент ::placeholder color (в некоторых случаях псевдокласс) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder: <input type=»email» placeholder=»[email protected]»>.
Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.
Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:
input[type="email"].big-dog::-webkit-input-placeholder {
color: orange;
}- Разница между :placeholder-shown и ::placeholder
- Элемент или класс?
- Цвет заглушки в Firefox
- Поддержка стилей
- Дополнительные ресурсы
- Браузерная поддержка
:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.
Взгляните на диаграмму:
Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown, но отсутствует ::placeholder.
Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом (например, можно изменять font-size).
Обратите внимание: :placeholder-shown – псевдокласс (элемент в конкретном состоянии), а ::placeholder – это псевдоэлемент (видимая часть, которая находится не в DOM).
Отличаются они одинарными и дойными кавычками.
Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.
В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.
Изначально этот псевдокласс был внедрён в браузер Firefox. Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder. А псевдокласс не позволяет этого сделать.
IE10 поддерживает этот функционал в качестве псевдокласса, а не элемента. Во всех остальных браузерах он расценивается как псевдоэлемент.
Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43, а справа — Chrome 47:
Так происходит потому, что по умолчанию все «заглушки» в Firefox получают дополнительное значение прозрачности.
Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:
::-moz-placeholder {
opacity: 1;
}Попробуйте открыть это демо в браузере Firefox.
Псевдоэлемент поддерживает следующие свойства:
- font properties;
- color;
- background properties;
- word-spacing;
- letter-spacing;
- text-decoration;
- vertical-align;
- text-transform;
- line-height;
- text-indent;
- opacity;
Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse
Здесь имеется в виду как нативная поддержка CSS input placeholder color, так и поддержка, реализуемая с помощью префиксов.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
| 4+ | 5+ | 4+ | 15+ | 10+ | Любой | Любой |
Firefox поддерживает псевдоклассы до 18 версии.
Валентин Сейидовавтор-переводчик статьи «::placeholder»
::placeholder ⚡️ HTML и CSS с примерами кода
С помощью псевдоэлемента ::placeholder задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder.
Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Псевдо-элементы- ::after
- ::backdrop
- ::before
::cue- ::first-letter
- ::first-line
::grammar-error::marker::part()- ::placeholder
- ::selection
::slotted()::spelling-error
Синтаксис
::placeholder {
color: blue;
font-size: 1.5em;
}
Спецификация
- CSS Pseudo-Elements Level 4
Примечания
- Internet Explorer использует псевдокласс
:-ms-input-placeholder.
- Microsoft Edge использует псевдоэлемент
::-ms-input-placeholder. - Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент
::-webkit-input-placeholder. - Firefox с версии 4 и до 19 использует псевдокласс
- Firefox до версии 51 использует псевдоэлемент
::-moz-placeholder.
Пример 1
HTMLCSS
<input placeholder="Type something here!" />
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
Пример 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>placeholder</title>
<style>
body {
background: #053f38;
}
input[type='search'] {
border: 1px solid #98baba; /* Параметры рамки */
background: transparent; /* Прозрачный фон */
padding: 1px 4px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
}
input[type='search']::-moz-placeholder {
color: #ffd595; /* Цвет подсказывающего текста */
}
input[type='search']::-webkit-input-placeholder {
color: #ffd595;
}
input[type='search']:-ms-input-placeholder {
color: #ffd595;
}
input[type='search']::-ms-input-placeholder {
color: #ffd595;
}
input[type='search']::placeholder {
color: #ffd595;
}
</style>
</head>
<body>
<form action="handler. php">
<p>
<input
type="search"
placeholder="Поиск по сайту"
name="q"
/>
<input type="submit" value="Найти" />
</p>
</form>
</body>
</html>
Результат:
См. также
:placeholder-shown<input><textarea>
Ссылки
- Псевдо-элемент
::placeholderMDN (рус.)
css — Как установить цвет текста «заполнитель»?
спросил
Изменено 8 лет назад
Просмотрено 143 тыс. раз
Можно ли установить цвет текста заполнителя ?
..">
- css
- html
- цвета
2
::-webkit-input-placeholder { /* Браузеры WebKit */
цвет: #999;
}
:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */
цвет: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
цвет: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
цвет: #999;
}
Никому не нравятся ответы «обратитесь к этому ответу», но в этом случае это может помочь: изменить цвет заполнителя ввода HTML5 с помощью CSS
Поскольку он поддерживается только парой браузеров, вы можете попробовать подключаемый модуль jQuery (при условии, что вы можете\используете jQuery). Это позволяет вам стилизовать текст-заполнитель с помощью CSS, поскольку на самом деле это всего лишь трюк с обменом, который он делает с событиями фокуса.
Плагин не активируется в браузерах, которые его поддерживают, поэтому вы можете использовать CSS, ориентированный на chrome\firefox, и CSS плагина jQuery, чтобы поймать все остальное.
Плагин можно найти здесь: https://github.com/mathiasbynens/jquery-placeholder
Попробуйте это
textarea::-webkit-input-placeholder {color: #999;}
Чтобы задать цвет заполнителя, используйте следующие строки кода:
::-webkit-input-placeholder { color: red; }
::-moz-placeholder {цвет: красный; }
:-ms-input-placeholder { цвет: красный; }
:-o-input-placeholder { цвет: красный; }
2
# Попробуйте это:
input[type="text"],textarea[type="text"]::-webkit-input-placeholder {
цвет:#f51;
}
input[type="text"],textarea[type="text"]:-moz-placeholder {
цвет:#f51;
}
input[type="text"],textarea[type="text"]::-moz-placeholder {
цвет:#f51;
}
input[type="text"],textarea[type="text"]:-ms-input-placeholder {
цвет:#f51;
}
## Работает очень хорошо для меня.
Попробуйте это
input::-webkit-input-placeholder { /* Браузеры WebKit */
цвет: #f51;
}
input:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */
цвет: #f51;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
цвет: #f51;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
цвет: #f51;
} 1
Для Firefox используйте:
input:-moz-placeholder { color: #aaa; }
textarea:-moz-placeholder {цвет: #aaa;}
Для всех остальных браузеров (Chrome, IE, Safari) просто используйте:
.
placeholder { color: #aaa; }
4
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как изменить цвет заполнителя ввода HTML5 с помощью CSS
HTML5 имеет атрибут, называемый заполнителем.
Этот атрибут, используемый в элементах и