CSS від А до Я: плейсхолдер

39

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по стилізації плейсхолдеров.

Відеоурок і його текстову версію псевдоелемент можна подивитися за посиланням.

P значить плейсхолдер

Для створення складних дизайнерських рішень без зайвого роздування розмітки несемантическими елементами відмінно підходять псевдоелементи :before :after. Інші псевдоелементи типу :first-line :first-letter дозволяють стилізувати окремі частини елементів, які не позначені в розмітки документа.

У відеоуроці ми розглянули безліч псевдоелемент, однак ми не розібрали псевдоэлемент, що дозволяє стилізувати текст в плейсхолдерах. Виправимо це упущення.

Як вибрати плейсхолдер

Уявімо наступний код:

Колір тексту, що вводиться, можна зробити червоним:

.name-field {
color: red;
}

Також це поле можна було б знайти і стилізувати по атрибуту плейсхолдера:

input[placeholder=»Enter your name»] {
color: red;
}

Однак так ми стилізуємо введений текст, а не текст плейсхолдера. Тут нам допоможе кілька селекторів з вендорными префіксами псевдоэлемента плейсхолдер.

::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {/*Firefox 18-*/
color: red;
}
::-moz-placeholder {/*Firefox 19+*/
color: red;
}
:-ms-input-placeholder {
color: red;
}

Ви можете сказати, що тут код повторюється, проте іншого більш чистого способу просто немає. Код нижче працювати не буде:

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: red;
}

Щоб застосувати стилі всередині фігурних дужок, що браузер повинен «розуміти» кожен селектор, розділений комою.

Стилізація плейсхолдера з допомогою Sass

Щоб не повторювати CSS код, можна написати Sass міксин. Міксин нижче я використовую в 99% своїх проектів:

@mixin input-placeholder {
::-webkit-input-placeholder {
@content;
}
:-moz-placeholder {/* Firefox 18- */
@content;
}
::-moz-placeholder {/* Firefox 19+ */
@content;
}
:-ms-input-placeholder {
@content;
}
}
/* застосування */
@include input-placeholder {
color: red;
}

З його допомогою я можу стилізувати плейсхолдеры у всіх браузерах з допомогою всього одного виклику @include, що дозволяє скоротити код і зробити його зручним для подальшого обслуговування.

Уважно дивіться на оголошення, коли стилизуете плейсхолдеры

В браузерах IE стилі для самого поля форми можуть переписувати стилі плейсхолдера.

:-ms-input-placeholder {
color: red;
}
input[type=»text»] {
color: blue; /* В IE колір плейсхолдера буде синій */
}

Задавайте для стилів плейсхолдера в IE більшу специфічність, щоб вони правильно застосовувалися. Тут навіть можна вдатися до !important, але будьте обережні з таким потужним інструментом.

Не забувайте про прозорість плейсхолдеров

У Firefox плейсхолдеры мають прозорість opacity приблизно 0.5. Таким чином, якщо зробити текст плейсхолдера червоним, то на виході ви отримаєте приглушений колір. Або ж можна задати властивість opacity: 1. У цьому випадку не допоможе навіть Normalize.css. Якщо у вашому проекті плейсхолдеры повинні бути непрозорими, пам’ятайте про це!