Placeholders, які швиденько вирізані з тексту елементів всередині, може бути ніби в стилі. Fortunately we"ve sourced a short but ефективні CSS solution до style your input"s placeholder текст будь-якого кольору і небезпечності ви. Read on for the code.
Changing placeholder text color
Let"s start with a simple input and some placeholder text, for this example we"ll use the word "search" but you can use anything you want. The basic HTML is below:
HTML
Input (and textarea) placeholder text defaults до світлого кольору, як, якщо можна змінити те, що з кількома лініями CSS. Тут ми можемо завантажити текст, використовуючи HTML-колір name, але будь-який колір методу виходу (HEX, RGB, HSL).
CSS
::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ color: red; opacity: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ color: red; opacity: 1; )Очевидно, що це важливо, щоб включати різні повноваження fixs in order to support as browsers as possible.
Changing placeholder focus text color
Правильно, ми успішно змінювали кольори місцезнаходження тексту на чорний, але це буде добре, якщо миттєво завантажені, коли ваші кнопки всередині нашого повідомлення. on focus.
CSS
input (outline: none; padding: 12px; border-radius: 3px; border: 1px solid black;) ::-webkit-input-placeholder ( /* Chrome */ color: red; transition: opacity 250ms ease-in-out ; ) :focus::-webkit-input-placeholder ( opacity: 0.5; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; transition: opacity 250ms ease-in-out; ) :focus :-ms-input-placeholder ( opacity: 0.5; ) ::-moz-placeholder ( /* Firefox 19+ */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; ) :focus:: -moz-placeholder ( opacity: 0.5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; ) :фокус:-moz-placeholder ( opacity: 0.5; )У тексті вище ми бачимо кілька основних стилів на вхіді йогоself, і посилаються на перехід на оpacity, щоб зробити життєвий добрий nicer.
Плейсхолдер – елемент поля введення, у якому можна розмістити підказку. Коли користувач починає вводити дані, допоміжний текст зникає, щоб не заважати. Кожен браузер має свою думку щодо того, як слід відображати цей елемент, і часом дефолтні стилі ламають весь дизайн. Щоб керувати ними, потрібно скористатися спеціальним правилом CSS placeholder.
Де знаходиться плейсхолдер?
Проблема в тому, що підказка поля введення надійно захована в тіньовому DOM, і добратися до неї не так просто. Для цього використовується спеціальний нестандартний псевдоелемент CSS::placeholder. З його допомогою можна керувати властивостями підказки.
You will be interested:
Стилізація 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; ::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, який використовується в елементах 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, і добратися до неї не так просто. Для цього використовується особливий нестандартний ::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колір підказки при фокусуванні на такому полі плавно змінюватиметься протягом однієї секунди.
Псевдоелемент, за допомогою якого задається стильне оформленняпідказує текст, створений атрибутом placeholder . Дозволяється використовувати властивості для зміни вигляду тексту, наприклад, встановити шрифт і колір.
Синтаксис
Селектор::placeholder ( ... )
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <размер> |
| A && B | Значення мають виводитися у вказаному порядку. | <размер> && <цвет> |
| A | B | Вказує, що треба вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватись самостійно або спільно з іншими у довільному порядку. | width || count |
| Групує значення. | [crop || cross] | |
| * | Повторювати нуль або більше разів. | [,<время>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Зазначений тип, слово чи група не є обов'язковим. | inset? |
| (A, B) | Повторювати не менш як A, але не більше B разів. | <радиус>{1,4} |
| # | Повторювати один або більше разів через кому. | <время># |
Приклад
Результат прикладу показано на рис. 1.
Рис. 1. Використання::placeholder
Примітка
Internet Explorer використовує псевдоклас :-ms-input-placeholder.
Microsoft Edge використовує псевдоелемент ::-ms-input-placeholder.
Chrome, до версії 57, Opera до версії 44, Safari до версії 10.1 та Android використовують псевдоелемент ::-webkit-input-placeholder.
Firefox з версії 4 і до 19 використовує псевдоклас :-moz-placeholder.
Firefox до версії 51 використовує псевдоелемент ::-moz-placeholder.
Браузери
Браузери
У таблиці браузерів використовуються такі позначення.
