RealAdmin.ru

Оформление плейсхолдера с помощью CSS стилей

CSS,Веб-дизайн,jQuery
Категория: Сайтострой
25 Окт 2015 г. в 14:42

У элементов ввода есть аттрибут «placeholder» с помощью которого можно вывести информацию о поле и которая исчезнет при его заполнении. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе его игнорируют. Однако, существуют подходы, которые позволяют обходить эти недостатки. Рассмотрим следующие моменты:

  • изменение стиля плейсхолдера;
  • исчезание при нажатии на поле, а не вводе;
  • использование в браузерах, которые не поддерживают аттрибут.

Для примера возьмём текстовое поле input и будем применять к нему стили.

Изменение цвета placeholder и других стилей

Браузеры на разных движках по разному отображают плейсхолдер, чаще всего это текст с прозрачностью. То есть если текст чёрный, то плейсхолдер будет серым. Чтобы изменить цвет и прозрачность, при написании стилей необходимо указывать дополнительные директивы, которые поймёт лишь движок для которого они предназначены. Изменим цвет на красный без прозрачности.

<style>
  ::-webkit-input-placeholder {color:#f00; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#f00; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#f00; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#f00; opacity:1;}/* IE */
</style>

<input type="text" placeholder="Начните вводить текст" value="" />

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

 .input-1::-webkit-input-placeholder { color:red; }
 .input-2::-webkit-input-placeholder { color:green; }
 ...
 и.т.д.

Убираем placeholder при нажатии на поле

По-умолчанию, браузеры скрывают плейсхолдер только после начала ввода текста. Но не сложно сделать чтобы он убирался уже при нажатии на поле. Для этого для полей с фокусом напишем стиль, в котором сделаем подсказку полностью прозрачной.

  :focus::-webkit-input-placeholder {opacity:0;}/* webkit */
  :focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
  :focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
  :focus:-ms-input-placeholder      {opacity:0;}/* IE */

Скрывать плейсхолдер при форкусе можно по разному, например, плавно изменяя прозрачность или цвет. А можно настроить и css анимацию, когда подсказка будет плавно уезжать за пределы поля. Всё это возможно благодаря CSS, но большого смысла я в этом не вижу, так как кроссбраузерность таких красивостей будет страдать, да и пользы от этих эффектов практически никакой.

Кроссбраузерность placeholder

Не все браузеры поддерживают аттрибут «placeholder», а значит в них он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, находятся те, кто им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то мы обязаны позаботиться об этом.

Для отображени подсказки в браузерах, не поддерживающих аттрибут, будем использовать jquery плагин.

«jquery.placeholder»

Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с аттрибутом «placeholder»:

    <script src="/jquery.placeholder.min.js"></script>
    
    <script>
        $(function(){
            $('input[placeholder], textarea[placeholder]').placeholder();
        });
    </script>
    
    <style>
        input.placeholder, textarea.placeholder. { color: green; }
    </style>

Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из аттрибута «placeholder». При фокусе «value» очищается. Чтобы текст из аттрибута не выглядел точно так же как вводимый текст, мы его офрмляем с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

Посмотрите похожее — 6
Комментарии — 0
    © REALADMIN.RU   2016 г.
    Страница сгенерирована: 0,1049 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top