input::placeholder {

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 колір підказки при фокусуванні на такому полі буде плавно змінюватися протягом однієї секунди.