Пользователь
0,0
рейтинг
28 мая 2011 в 14:04

Разработка → Стилизация HTML5 плейсхолдера с помощью CSS из песочницы

CSS*
В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

CSS правила для webkit и mozilla:
input::-webkit-input-placeholder {}
input:-moz-placeholder {}

Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:
input:-moz-placeholder,
input::-webkit-input-placeholder { }
то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.


Еще несколько примеров:
/* стили для webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}

/* стили для mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}


Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.

Список поддерживаемых CSS стилей для атрибута placeholder:
Chrome 10(Win 7) Chrome 11 (Win 7) Firefox 4(Win 7) Safari 3.1(Win XP & OS X) Safari 5(Win 7 & OS X) Opera 11(Win 7)
background-color нет нет + нет + нет
border нет нет + нет + нет
color + + + нет + нет
font-size + + + нет + нет
font-style + + + нет + нет
font-weight + + + нет + нет
letter-spacing + + + нет + нет
line-height нет нет нет нет нет нет
padding top/bottom нет нет + нет + нет
padding left/right нет нет + нет нет нет
text-decoration нет нет + нет + нет
text-transform нет нет + нет + нет
Ga4o @ga4o
карма
21,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (57)

  • +6
    Добро пожаловать на хабр!

    Демку еще хотелось бы к статье :)
    • +5
      • 0
        Поправте, стили для Firefox. Там лишнее двоеточее #field2::-moz-placeholder вместо #field2:-moz-placeholder.
        • –3
          где там?
        • 0
          Пример не мой, так что не могу.
        • 0
          Вообще, это не лишнее двоеточие, а синтаксис псевдоэлементов в CSS3 — www.w3.org/TR/css3-selectors/#pseudo-elements

          Два двоеточия были введены чтобы различать псевдоэлементы от псевдоклассов, хотя для псевдоэлементов из CSS2 можно по преднему использовать и одно двоеточие в рамках обратной совместимости. Но при этом для новых, введённых в CSS3, псевдоэлементов в спецификации запрещают использовать одно двоеточие.
  • +4
    Судя по поддержке атрибута placeholder браузерами придется и дальше эмулировать его при помощи Jquery (ну или аналогов).
    • –1
      Так собсно никаких jQuery:
    • –1
      Хабр, зараза, съедает скопипасченный код, так что дам ссылку
      forum.aceweb.ru/index.php?showtopic=2812
      • 0
        там только не хватает обработки события submit, чтобы при валидации форма не считалась заполненной, и плейсхолдер не отсылался на сервер
        • 0
          Ну это само собой разумеется и прописывается в обработчике формы.
      • +1
        Я понимаю, что это просто некий абстрактный пример, но писать js в перемешку с html даже для примера это очень плохая идея. Кто то же может подумать, что так и надо ;)
        • –1
          Для тех, кто так подумает, это не обернется таким уж злом.
          • 0
            Почему? Думаю для них это на первом же объемном проекте выльется в мир, который полон феерических сюрпризов.
            • –1
              Будет полезным поводом, чтобы понять: «Не клепай готовые примеры, учи язык!»
              • 0
                Злой ты.
                • 0
                  Наверное эпоха форумов сказывается, когда человек спросит на сделать что либо на php, а ты ему скажешь с помощью какой функции это реализовать и дашь наводку, тебе скажут: «Лучше бы готовый пример дал, чем учить тут меня!»
      • 0
        В этом примере больше недостатков, чем пользы.

        Необходимость обработки сабмит (и совпадения всех default значений в HTML и обработчике, что особенно весело, когда форм много и все с локализацией)
        Невозможность ввести default значение
        Невозможно отличить по внешнему виду, было уже что-то введено или нет
        Некорретная работа с password полями

        Такие примеры — издевательство над пользователями, которые обязательно столкнутся со всем вышеперечисленным, но уже потом :)
      • 0
        Честно говоря я уже отвык писать код, как представлено у Вас по ссылке.
        Посмотрите на возможную реализацию на Jquery:
        predvoditelev.ru/page/placeholder_for_input_and_textarea
  • +1
    хммм, а почему у меня получалось стилизовать просто через input.placeholder?
    А так да, очень православный атрибут. А альтернативно одаренные браузеры начинают работать за счет небольшой jQuery оплетки.
    • +1
      Может вы работали со скриптовой эмуляцией placeholder'а, а не с нативным?
      • 0
        Нет нет, я понял в чем у меня тогда дело было. Тогда по макету плейсхолдер как раз и должен был быть такой же серый, как идет по умолчанию. Т.е. мой код игнорировался, но делалось все равно как надо.
        Но где же я видел тогда input.placeholder? Возможно, да, в скриптовой эмуляции.
  • +8
    Совет автору (да и остальным) на будущее: если раскрасить табличку (например вот так), она становится на порядок нагляднее.
  • –2
    Судя по таблице Firefox 4 и Safari 5 шагают в ногу со временем.
    Когда наконец сделает один нормальный браузер для всех. Хотя везде свои плюсы и минусы.
    • 0
      Технически, Firefox и Safari предлагают разные (и несовместимые) варинты расширения CSS, ни один из которых пока не является стандартным. В первом случае это псевдокласс, во втором пресевдоэлемент.

      Так что и ноги разные, и не в ногу со временем, а предлагая решения на будущее. (см. также обсуждение в рабочей группе по CSS lists.w3.org/Archives/Public/www-style/2011Apr/0240.html — и последующие ответы).

  • 0
    мне кажется, что только через 4 года можно будет пользоваться этим атрибутом и не беспокоиться о совместимости.
    Хотя если вспомнить историю с IE6, то вообще через 10 лет.
    • 0
      Не очень понимаю почему стоит как то особо озадачиваться обратной совместимостью конкретно этого атрибута. Единственный случай — label скрыт. Тогда да. Но даже тогда реализовать совместимость можно за пару минут на коленке:

      jsfiddle.net/silentimp/vQYZF/7/
      • 0
        jsfiddle.net/silentimp/vQYZF/ — так лучше.
        • 0
          да есть уже готовые плагины, только они еще вытаскивают значение из атрибута инпута «placeholder» и обрабатывают события «submit» (и забывают «serialize»)
          • 0
            кстати, многие проблемы снимаются, если не трогать value инпута, а приделывать плейсхолдер поверх инпута (или под ним).
  • 0
    Спасибо, уже давно хотел иметь возможность изменять хотя бы цвет текста плейсхолдера, а тут, оказывается, такие возможности! Ну, по крайней мере, в теории :-)
  • –5
    twitter.com/#!/pepelsbey/statuses/69750086141345792
    • НЛО прилетело и опубликовало эту надпись здесь
      • –2
        Получается, что так.
  • –1
    Опера смешная, реализовала нативную поддержку плейсхолдера, но не реализовала ни одного способа его стилизации. При том, что джаваскриптовые обертки зачастую детектят нативную поддержку и отключаются.
    • 0
      Т.е. по вашему, браузер, который реализовал, например, overflow: scroll, обязан реализовать способ стилизации скролбаров?
      • 0
        Нет, по-моему, браузер, который реализовал плейсхолдер, обязан реализовать способы стилизации этого плейсхолдера. Ибо нестилизуемый плейсхолдер хуже чем полное отсутствие плейсхолдера.
        • 0
          В чем разница со скролбарами? Почему их стилизацию можно не реализовывать, а плейсхолдер вы считаете бесполезным без стилизации?
    • 0
      Вообще то практика показывает что в последней версии под мак как минимум цвет плейсхолдера меняется как положено :)
    • 0
      значит хреновые обертки, если не учитывают специфику различных браузеров.
      • 0
        Не было никакой специфики до выхода оперы 11. Были браузеры, которые поддерживали плейсхолдер и поддерживали его стилизацию, а были браузеры, которые не поддерживали плейсхолдер. Поэтому ни одна обертка даже не заморачивалась никакой «спецификой». Либо фигачили эмуляцию везде не глядя, либо делали так:
        if ('placeholder' in document.createElement('input')) { ... }


        А потом появилась опера и все сломала. Пришлось сразу писать для нее отдельные костыли, что усложнило весьма простой изначально код.
        • 0
          ну ведь браузеры постоянно меняются. просто проапдейтят плагин, да и все)
  • +2
    В этих плейсхолдерах мне ненравится то, что когда поле становится активным, то подсказка исчезает. Иногда сложно вспомнить что в это поле вводить. Хорошо сделано на сайте me.com — там плейсхолдер исчезает только тогда, когда начинаешь ввод.
    image
    • +7
      Но в этом случае может случиться и так, что пользователь может подумать, что, например «name@example.com» — это уже введённая информация и попытается её выделить (а это у него, естественно, не получится) — в общем возможно лёгкое помешательство.

      В этом случае, думаю, будет неплохо изменять цвета плейсхолдера на менее контрастные при фокусировке на поле (видел довольно много подобных реализаций, но где конкретно — сейчас не вспомню). Такой приём почти полностью исключит двоякое толкование плейсхолдера.
    • 0
      Обычно смотришь на второе поле и уже исходя из него определяешь, что вводить нужно. Звучит сложно, но происходит за секунду всё это в голове :)
      • 0
        Второе? А если их 10, куда смотреть, чтобы понять, что нужно вводить в текущее?
        • 0
          Я имел ввиду пример выше «логин — пароль». Вообще, мне больше нравится когда при установки курсора подсказка исчезает, так что думаю, что всё это дело вкуса в какой-то мере.
          • 0
            Это дело не вкуса, удобства пользования. В вашем случае что бы посмотреть, что нужно вводить в поле, где находится курсор, его нужно убрать, потом вернуть.
            • 0
              А Вы уверены, что всем пользователям настолько неудобно, когда исчезает подсказка при установки курсора? Вот исходя из этого вопроса я и решил, что всё это — дело вкуса.
              • 0
                Всем пользователям неудобно, когда неясно что нужно писать в поле, в котором курсор.
                • 0
                  Но не всем неясно… :)
                  • –1
                    Интересы телепатов я не учел.
    • 0
      такой эффект можно получить с помощью jq-watermark
    • 0
      где-то видел пример, где при фокусе плейсхолдер отъезжает влево и становится обычным лейблом к инпуту. прикольно смотрится и понятно.
  • 0
    Особенно неприятно в отсутствии возможности установки инетрлиньяжа для placeholder то, что в Chrome он не наследуется от самого input.
    Тоесть у вас задан кастомный размер кегля шрифта и интерлиньяж и текст в placeholder в Chrome будет ему не соответствовать и при начале ввода будет ощутимый прыжок.

    Тесткейс:
    jsfiddle.net/silentimp/p2Uas/

    И приходится увеличивать размер кегля в placeholder в Chrome, что бы текст не оказывался черти-где:
    jsfiddle.net/silentimp/FJNEG/

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.