Якщо ви не знайомі з атрибутом 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[placeholder] { 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; }
Отримуємо таке дійство:
Додав: htmaker, 06.08.2016 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
