Новини високих технологій
» » Стилізація елемента placeholder в CSS

Стилізація елемента placeholder в CSS

20-06-2018, 19:03
1 233
Плейсхолдер - елемент поля введення, в якому можна розмістити підказку. Коли користувач починає вводити дані, допоміжний текст пропадає, щоб не заважати. Кожен браузер має свою думку на рахунок того, як слід відображати цей елемент, і часом дефолтні стилі ламають весь дизайн. Щоб управляти ними, потрібно скористатися спеціальним правилом CSS placeholder.

Де знаходиться плейсхолдер?

Проблема в тому, що підказка поля введення надійно захована в тіньовому DOM, і дістатися до неї не так-то просто. Для цього використовується особливий нестандартний псевдоэлемент CSS ::placeholder. З його допомогою можна керувати властивостями підказки.
Стилізація placeholder на CSS виглядає так:

input::placeholder {
color: red;
opacity: 1;
font-style: italic;
}

Підтримка браузерами

Псевдоэлемент CSS placeholder добре обробляється усіма сучасними браузерами, а для підтримки старих браузерів можна скористатися префіксами:

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_1 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});
  • ::-webkit-input-placeholder - для webkit-браузерів (Mozilla, 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: black;
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 колір підказки при фокусуванні на такому полі буде плавно змінюватись протягом однієї секунди.
Цікаво по темі
Спорядження сталкера: особливості та основні елементи
Спорядження сталкера: особливості та основні елементи
Спорядження сталкера - важливий аспект ігрового процесу. Завдяки різним елементам він отримує можливість вижити в особливо небезпечних умовах. До
Як на сайті прибрати підкреслення посилань на CSS?
Як на сайті прибрати підкреслення посилань на CSS?
Історично склалося так, що при обробці веб-документа браузери підкреслюють і виділяють особливим кольором гіперпосилання. Це може серйозно порушувати
PHP implode: перетворення одновимірних і багатовимірних масивів у рядки, сортування за допомогою числових індексів.
PHP implode: перетворення одновимірних і багатовимірних масивів у рядки, сортування за допомогою числових індексів.
Гнучкість і багатоваріантність застосування функції php implode(), об'єднання значень одновимірних і багатовимірних масивів у рядки, маніпулювання
Checkbox html: приклади гарних кнопок на чистому CSS, створення "акордеона", отримання даних з форм за допомогою PHP і jQuery
Checkbox html: приклади гарних кнопок на чистому CSS, створення "акордеона", отримання даних з форм за допомогою PHP і jQuery
Варіанти застосування html input checkbox дуже великі, але найчастіше цей елемент використовується у формах передачі даних. Однак він вміє виконувати
Властивість CSS opacity: управління прозорістю
Властивість CSS opacity: управління прозорістю
Зміна прозорості елементів за допомогою властивості CSS opacity. Приклади використання, інтервал можливих значень, спадкування. Управління прозорістю
CSS Selectors. Види селекторів
CSS Selectors. Види селекторів
Що таке селектори CSS? Як ними користуватися? Який селектор ідеально підійде для вашого випадку? Розглянемо всім існуючі варіанти.