Изменить цвет placeholder css. Добавляем CSS стиль для placeholder
Если вы не знакомы с атрибутом 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; }
Получаем такое действо:
Плейсхолдер — элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.
Где находится плейсхолдер?
Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный псевдоэлемент CSS::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-свойств. Фон блока подсказки распространяется на все поле ввода. Можно задать не только цвет (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 — атрибут, который отображает текст-подсказку в поле формы и который пропадает автоматически при получении поле фокуса. Для браузеров, поддерживающие этот атрибут, отпадает необходимость использования Javascript-решений для очистки поля. Но разработчики столкнулись с некоторыми проблемами при использовании placeholder.
Проблема №1 — оформление placeholder
По умолчанию браузеры отображают текст подсказки серым цветом и шрифт ( , ) соответствует заданным для самого поля. Но допустим нам нужно оформить текст подсказки как-то не обычно, например, сделать его курсивом и красным цветом. Для этого используем следующий код:
::-webkit-input-placeholder { /* для webkit браузеров */ color: red; font-style: italic; } :-moz-placeholder { /* для браузеров mozilla */ color: red; font-style: italic; } input { text-align: left; /* в Opera для полей number по умолчанию выравнивание вправо */ }
Что не поддается
- задать свои стили подсказкам в Opera 11 (как это обойти я пока не нашел);
- сделать отступы подсказкам: отступы от границ полей для placeholder такие же как и для value. Можно пробовать это обойти правилами вроде:
::-webkit-input-placeholder { margin-left: 20px; display: block; }
Но ни этот, ни любой другой вариант позиционирования у меня кроссбраузерно не заработал. Да и вообще это позиционирование мало кому нужно:).
- оформить подсказку картинкой:
::-webkit-input-placeholder { background: url(back.jpg); display: block; }
Такой фокус работает только в некоторых браузерах.
Проблема № 2 — не отображается placeholder
Даже те браузеры, которые поддерживают подсказки в полях, не для всех типов полей их выводят. Таблица отображения placeholder в зависимости от типа поля и браузера:
| Firefox 4.0 | Opera 11 | Chrome 11 | Safari 5 | |
|---|---|---|---|---|
| input type=text | + | + | + | + |
| input type=password | + | + | + | + |
| input type=tel | + | + | + | + |
| input type=email | + | + | + | + |
| input type=number | + | + | - | + |
| input type=url | + | + | + | + |
| input type=search | + | + | + | + |
| input type=date | + | - | - | + |
| input type=color | + | - | - | + |
| textarea | + | - | + | + |
Для одних полей объяснимо почему нет placeholder (вроде color). Для других спорно (date). Для третьих вообще непонятно почему нет (textarea, number). Бороться с этим придется пока то ли , то ли как-то еще. Решать думаю стоит в каждом конкретном случае. Так же я пока особо не радовался на счет отображения везде подсказок в Firefox и Safari: они просто еще не поддерживают многие типы полей.
Выводы
Во-первых, текстовые подсказки в полях следует использовать только там, где они уместны: где есть острая необходимость экономии места.
Во-вторых, дизайнеру хоть иногда следует консультироваться с frond-end девелопером, о возможности реализации той или иной фичи.
В-третих, если уже приходится работать с такой формой, остается или делать костыли для некоторых браузеров, чтобы не потерять новых возможностей форм, или отказываться от новых типов, а значит и удобства для некоторых пользователей в пользу "эстетической красоты".
Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом 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 цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.
