ga4o May 28 2011 at 14:04

Стилизация HTML5 плейсхолдера с помощью CSS

2 min

138K

CSS*

From sandbox

+67

Comments 56

Enuriru May 28 2011 at 14:41

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

Демку еще хотелось бы к статье :)

Fesor May 28 2011 at 14:46

Дэмо

Megas May 28 2011 at 17:48

Поправте, стили для Firefox. Там лишнее двоеточее #field2::-moz-placeholder вместо #field2:-moz-placeholder.

ga4o May 28 2011 at 18:01

где там?

-3

Fesor May 28 2011 at 20:17

Пример не мой, так что не могу.

kizu May 29 2011 at 23:27

Вообще, это не лишнее двоеточие, а синтаксис псевдоэлементов в CSS3 — www.w3.org/TR/css3-selectors/#pseudo-elements

Два двоеточия были введены чтобы различать псевдоэлементы от псевдоклассов, хотя для псевдоэлементов из CSS2 можно по преднему использовать и одно двоеточие в рамках обратной совместимости. Но при этом для новых, введённых в CSS3, псевдоэлементов в спецификации запрещают использовать одно двоеточие.

kuber May 28 2011 at 14:50

Судя по поддержке атрибута placeholder браузерами придется и дальше эмулировать его при помощи Jquery (ну или аналогов).

dudeonthehorse May 29 2011 at 01:38

Так собсно никаких jQuery:

-1

dudeonthehorse May 29 2011 at 01:46

Хабр, зараза, съедает скопипасченный код, так что дам ссылку
forum.aceweb.ru/index.php?showtopic=2812

-1

tibalt May 29 2011 at 09:09

там только не хватает обработки события submit, чтобы при валидации форма не считалась заполненной, и плейсхолдер не отсылался на сервер

dudeonthehorse May 29 2011 at 09:11

Ну это само собой разумеется и прописывается в обработчике формы.

UFO just landed and posted this here

dudeonthehorse May 29 2011 at 09:24

Для тех, кто так подумает, это не обернется таким уж злом.

-1

UFO just landed and posted this here

dudeonthehorse May 29 2011 at 09:39

Будет полезным поводом, чтобы понять: «Не клепай готовые примеры, учи язык!»

-1

UFO just landed and posted this here

dudeonthehorse May 29 2011 at 10:12

Наверное эпоха форумов сказывается, когда человек спросит на сделать что либо на php, а ты ему скажешь с помощью какой функции это реализовать и дашь наводку, тебе скажут: «Лучше бы готовый пример дал, чем учить тут меня!»

Ryotsuke May 29 2011 at 14:49

В этом примере больше недостатков, чем пользы.

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

Такие примеры — издевательство над пользователями, которые обязательно столкнутся со всем вышеперечисленным, но уже потом :)

kuber May 29 2011 at 18:42

Честно говоря я уже отвык писать код, как представлено у Вас по ссылке.
Посмотрите на возможную реализацию на Jquery:
predvoditelev.ru/page/placeholder_for_input_and_textarea

NeonXP May 28 2011 at 15:03

хммм, а почему у меня получалось стилизовать просто через input.placeholder?
А так да, очень православный атрибут. А альтернативно одаренные браузеры начинают работать за счет небольшой jQuery оплетки.

putnik May 28 2011 at 15:07

Может вы работали со скриптовой эмуляцией placeholder'а, а не с нативным?

NeonXP May 28 2011 at 15:24

Нет нет, я понял в чем у меня тогда дело было. Тогда по макету плейсхолдер как раз и должен был быть такой же серый, как идет по умолчанию. Т.е. мой код игнорировался, но делалось все равно как надо.
Но где же я видел тогда input.placeholder? Возможно, да, в скриптовой эмуляции.

putnik May 28 2011 at 15:12

Совет автору (да и остальным) на будущее: если раскрасить табличку (например вот так), она становится на порядок нагляднее.

VladislavGH May 28 2011 at 15:21

Судя по таблице Firefox 4 и Safari 5 шагают в ногу со временем.
Когда наконец сделает один нормальный браузер для всех. Хотя везде свои плюсы и минусы.

-2

kichik May 28 2011 at 16:52

Технически, Firefox и Safari предлагают разные (и несовместимые) варинты расширения CSS, ни один из которых пока не является стандартным. В первом случае это псевдокласс, во втором пресевдоэлемент.

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

cbone May 28 2011 at 15:23

мне кажется, что только через 4 года можно будет пользоваться этим атрибутом и не беспокоиться о совместимости.
Хотя если вспомнить историю с IE6, то вообще через 10 лет.

UFO just landed and posted this here

tibalt May 29 2011 at 10:48

да есть уже готовые плагины, только они еще вытаскивают значение из атрибута инпута «placeholder» и обрабатывают события «submit» (и забывают «serialize»)

tibalt May 29 2011 at 10:50

кстати, многие проблемы снимаются, если не трогать value инпута, а приделывать плейсхолдер поверх инпута (или под ним).

inetbug May 28 2011 at 15:32

Спасибо, уже давно хотел иметь возможность изменять хотя бы цвет текста плейсхолдера, а тут, оказывается, такие возможности! Ну, по крайней мере, в теории :-)

pepelsbey May 28 2011 at 17:21

twitter.com/#!/pepelsbey/statuses/69750086141345792

-5

UFO just landed and posted this here

pepelsbey May 28 2011 at 18:02

Получается, что так.

-2

rwz May 28 2011 at 17:53

Опера смешная, реализовала нативную поддержку плейсхолдера, но не реализовала ни одного способа его стилизации. При том, что джаваскриптовые обертки зачастую детектят нативную поддержку и отключаются.

-1

homm May 29 2011 at 00:42

Т.е. по вашему, браузер, который реализовал, например, overflow: scroll, обязан реализовать способ стилизации скролбаров?

rwz May 29 2011 at 06:37

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

homm May 29 2011 at 12:39

В чем разница со скролбарами? Почему их стилизацию можно не реализовывать, а плейсхолдер вы считаете бесполезным без стилизации?

UFO just landed and posted this here

tibalt May 29 2011 at 09:11

значит хреновые обертки, если не учитывают специфику различных браузеров.

rwz May 29 2011 at 10:29

Не было никакой специфики до выхода оперы 11. Были браузеры, которые поддерживали плейсхолдер и поддерживали его стилизацию, а были браузеры, которые не поддерживали плейсхолдер. Поэтому ни одна обертка даже не заморачивалась никакой «спецификой». Либо фигачили эмуляцию везде не глядя, либо делали так:

if ('placeholder' in document.createElement('input')) { ... }

А потом появилась опера и все сломала. Пришлось сразу писать для нее отдельные костыли, что усложнило весьма простой изначально код.

tibalt May 29 2011 at 10:43

ну ведь браузеры постоянно меняются. просто проапдейтят плагин, да и все)

Elfet May 28 2011 at 20:19

В этих плейсхолдерах мне ненравится то, что когда поле становится активным, то подсказка исчезает. Иногда сложно вспомнить что в это поле вводить. Хорошо сделано на сайте me.com — там плейсхолдер исчезает только тогда, когда начинаешь ввод.

inetbug May 28 2011 at 20:39

Но в этом случае может случиться и так, что пользователь может подумать, что, например «name@example.com» — это уже введённая информация и попытается её выделить (а это у него, естественно, не получится) — в общем возможно лёгкое помешательство.

В этом случае, думаю, будет неплохо изменять цвета плейсхолдера на менее контрастные при фокусировке на поле (видел довольно много подобных реализаций, но где конкретно — сейчас не вспомню). Такой приём почти полностью исключит двоякое толкование плейсхолдера.

UFO just landed and posted this here

ShpuntiK May 28 2011 at 22:07

Обычно смотришь на второе поле и уже исходя из него определяешь, что вводить нужно. Звучит сложно, но происходит за секунду всё это в голове :)

homm May 29 2011 at 00:43

Второе? А если их 10, куда смотреть, чтобы понять, что нужно вводить в текущее?

ShpuntiK May 29 2011 at 10:51

Я имел ввиду пример выше «логин — пароль». Вообще, мне больше нравится когда при установки курсора подсказка исчезает, так что думаю, что всё это дело вкуса в какой-то мере.

homm May 29 2011 at 12:38

Это дело не вкуса, удобства пользования. В вашем случае что бы посмотреть, что нужно вводить в поле, где находится курсор, его нужно убрать, потом вернуть.

ShpuntiK May 29 2011 at 13:28

А Вы уверены, что всем пользователям настолько неудобно, когда исчезает подсказка при установки курсора? Вот исходя из этого вопроса я и решил, что всё это — дело вкуса.