Стилизация плейсхолдеров
Псевдоэлементы плейсхолдеров для разных браузеров
Скопировано
::-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;
}Все стили для плейсхолдеров надо писать отдельными строками, нельзя их совмещать через запятую – они не будут работать.
Поддерживаемые стили
Стилизовать плейсхолдеры можно через следующие свойства:
background
color
font
letter-spacing
line-height
opacity
text-decoration
text-indent
text-transform
vertical-align
word-spacing
Поддержка браузерами
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
| 4+ | 5+ | 4+ | 15+ | 10+ | Any | Any |
Убираем плейсхолдеры при фокусе
Скопировано
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
color: transparent !important;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
color: transparent !important;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
color: transparent !important;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
color: transparent !important;
}