CSS от А до Я плейсхолдер


Содержание материала:

Стилизация плэйсхолдеров

Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и

). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.

Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

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

Стилизация

Для стилизации плэйсхолдеров используются следующие правила:

Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse.

Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

Пример

Синий текст для плэйсхолдера (никогда так не делайте):

Поддерживаемые свойства

Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:

  • font и все связанные свойства ( font-size , font-family и т.д.)
  • background и все связанные свойства ( background-color , background-image и т.д.)
  • opacity
  • text-indent
  • text-overflow
  • color
  • text-transform
  • line-height
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align

Анимации

Идеи анимаций принадлежит блогу html5.by.

Все следующие примеры написаны с использованием препроцессора Sass. К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder :

Изменение прозрачности

Сдвиг вправо и влево

Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

Сдвиг вниз

Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.

Всё вместе

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

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

Autoprefixer

Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer. С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент ::placeholder :

После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.

Что дальше

Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс :placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

Применять стили с помощью :placeholder-shown будет гораздо проще:

Псевдоэлемент ::placeholder

Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Пример

Результат примера показан на рис. 1.

Рис. 1. Использование ::placeholder

Примечание

Internet Explorer использует псевдокласс :-ms-input-placeholder .

Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .

Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Andro >::-webkit-input-placeholder .

Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .


Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Браузеры ?

10 12 4 57 15 44 5 10.1 4 19 51
2.1 19 30 4.3 10.3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Плейсхолдеры в полях формы вредны

Вкратце: Использование плейсхолдеров внутри полей формы усложняет процесс вспоминания, какую информацию необходимо было внести в поле ввода. Из-за этого становится труднее процесс проверки и исправления ошибок. Это также может создать дополнительные трудности для людей с плохим зрением или когнитивными нарушениями.

Описания и подсказки могут объяснить, что необходимо вводить внутри каждого поля, и, следовательно, улучшить заполняемость формы и повысить её конверсию. Есть много способов показать подсказки. Самая частая реализация — это вставка плейсхолдеров внутрь поля. К сожалению, тестирование на пользователях показывает, что плейсхолдеры в полях формы часто вредят юзабилити больше, чем помогают ему.

Лейблы и плейсхолдеры

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

Лейблы и плейсхолдеры

Плейсхолдеры, замещающие лейблы

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

Худший вариант: в этом примере, текст плейсхолдера используется вместо лейбла

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

1. Исчезновение текста плейсхолдера напрягает кратковременную память пользователя

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

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

2. Без лейблов пользователь не сможет проверить свою работу до отправки формы

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

3. Когда появляется сообщение об ошибке, люди не знают как решить проблему

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

4. Исчезновение текста плейсхолдера, когда курсор помещается в поле формы, раздражает пользователей, которые используют для навигации клавиатуру

Люди используют кнопку табуляции для быстрого перемещения от одного поля к другому, и они не останавливаются для изучения следующего поля, пока не попадут на него.

5. На поля с надписью внутри обращается меньше внимания

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

6. Пользователи могут перепутать плейсхолдер с данными, которые автоматически заполнили поле

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

7. Иногда пользователям приходится удалить текст плейсхолдера вручную

Иногда плейсхолдеры не исчезают, когда пользователи помещают курсор в поле. Если плейсхолдер остаётся внутри поля как редактируемый текст, пользователям придётся вручную выделять его и удалять. Это создаёт ненужную нагрузку на пользователей и увеличивает стоимость взаимодействия с заполняемой формой.

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

Текст плейсхолдера в дополнении к лейблам

Использование плейсхолдера совместно с лейблами — это шаг в правильном направлении. Лейблы вне полей формы делают важную информацию видимой всё время, в то время как текст плейсхолдера оставлен для дополнительной информации. Однако, даже при использовании лейблов размещение важных подсказок и инструкций внутри полей формы всё ещё может стать причиной одной из 7 проблем отмеченных выше, хотя и в меньшей степени. Если в некоторых полях требуется специальное описание важное для корректного заполнения формы, лучшим решением будет разместить этот текст вне поля так, чтобы он всегда был виден.

Лучше: здесь, текст плейсхолдера используется как подсказка в дополнении к лейблу

Плейсхолдеры и доступность

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

  1. Светло-серый цвет текста плейсхолдера по умолчанию имеет слабый контраст по сравнению с цветом большинства фонов. Для пользователей со зрительным нарушением слабый контраст цвета делает такой текст сложным для восприятия. Поскольку не все браузеры позволяют изменить стиль текста плейсхолдера, используя CSS, это остаётся важным моментом.
  2. Пользователи с когнитивными или двигательными нарушениями сильнее обременены. Как мы уже видели, у всех пользователей могут быть проблемы с плейсхолдерами: исчезающие плейсхолдеры увеличивают нагрузку на память; постоянные затемнённые плейсхолдеры вызывают замешательство, когда выглядят кликабельными, но таковыми не являются, и плейсхолдеры, которые не исчезают, требуют больше действий с клавиатурой или мышкой для их удаления. Эти сложности имеют большее значение для людей с когнитивными или двигательными нарушениями.
  3. Не все средства для чтения с экрана озвучивают текст плейсхолдера. Слепые пользователи или пользователи с нарушением зрения могут полностью пропустить подсказку, если их ПО не озвучивает содержимое плейсхолдера.

Заключение

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

Самый лучший вариант: лейблы и подсказки расположены вне поля формы и всегда видны для пользователя

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

Исчезающий placeholder при фокусе


Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. Если мы посмотрим html-справочник, то найдем там следующее описание — выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.

К сожалению скрывание placeholder-а происходит по-разному — где то при получении фокуса, а где то при наличии хотя бы одного введенного символа. Мне нравится именно первый вариант, но как сделать его для всех браузеров, которые его поддерживают? Для этого определим следующие правила:

Стилизация placeholder в CSS

Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с исчезающим текстом в поле ввода формы с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:

На выходе мы получает такое поле:

Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
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-а в поле ввода.

В результате получаем поле ввода такого с placeholder такого вида:

Скрываем текст при клике по полю
По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.

Отступ для формы на равне с placeholder

Как сделать отступы для текста, чтобы они были на одном уровне с placeholder ? Когда вводишь текст

2 ответа 2

Отступы для placeholder и текста, который Вы вводите в поле, одинаковы. Просто задайте padding для поля и эти отступы будут действовать и для placeholder и для текста.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Плейсхолдеры в полях лид-форм губительны для вашей конверсии

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

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

Заголовки полей лид-формы и плейсхолдеры

Следует различать заголовки полей и плейсхолдеры.

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

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

Слово «Password» является заголовком, а предложение «Must have at least 6 characters» (с англ. — должно содержать не менее 6 симоволов) — плейсхолдером.

Указатели-заголовки лид-форм

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

Несмотря на то, что этот подход применяется исключительно из благих намерений, он имеет массу недостатков. Выглядит он следующим образом:

Это тот самый вариант, где плейсхолдер выполняет роль заголовка.

Ниже мы приведем 7 основных причин, из-за которых совмещать заголовок поля лид-формы с плейсхолдером не просто вредно, а опасно для вашей конверсии.

1. Исчезающий плейсхолдер оказывает излишнюю нагрузку на краткосрочную память ваших пользователей

Если пользователь забывает текст плейсхолдера (а это очень часто случается при заполнении длинной лид-формы), то обычно ему требуется стереть все, что он написал в поле, и кликнуть за его пределами, чтобы вернуть текст. Это дополнительное усилие, и если бы мы жили в идеальном мире, то ничего страшного бы и не случилось.

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

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

Имейте это в виду.

2. Отсутствие заголовков полей затрудняет пользователям итоговую проверку введенных данных

Предусмотрительные пользователи обычно просматривают введенные в форму данные и проверяют ее правильность перед отправлением. Отсутствие заголовков существенно затрудняет эту задачу. Аналогична ситуация и со столь новомодной сегодня функцией браузеров как автозаполнение: если будет допущена ошибка, ее крайне трудно найти.

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

3. В случае ошибки пользователи не знают, как ее исправить

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

4. Плейсхолдеры, исчезающие при установлении курсора на поле лид-формы, вызывают раздражение у пользователей, использующих клавиатуру

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

5. Поля с текстом чаще остаются без внимания


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

6. Некоторые пользователи могут принять плейсхолдер за значение, устанавливаемое системой по умолчанию, и пропустить его

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

7. Некоторые плейсхолдеры не исчезают после наведения на них курсора, и их приходится удалять вручную

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

Второй тип плейсхолдера не исчезает и не удаляется: он затемняется и отходит на второй план. В чем причина дискомфорта очевидна: набирать один текст поверх другого просто неудобно.

Плейсхолдер как дополнение к заголовку поля лид-формы

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

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

Плейсхолдер и юзабилити

Помимо тех проблем, которые мы уже осветили, существуют и проблемы с юзабилити. Плейсхолдеры — это довольно новая технология, но и она имеет существенные недостатки. Например:

  • по умолчанию цвет текста плейсхолдера светло-серый, и он нечитабелен на столь же светлом основном фоне подписного поля. Это может вызвать определенные затруднения для людей с нарушениями зрения. Поскольку большинство браузеров пока не обрабатывает шаблонный текст с помощью языка CSS, эта проблема далека от разрешения.
  • для людей с когнитивными нарушениями плейсхолдеры также могут стать серьезным препятствием. Как вы могли понять, плейсхолдеры задействуют краткосрочную память, требуют повышенной концентрации внимания и дополнительных усилий, а не все пользователи могут с этим относительно легко справиться.
  • не все программы чтения с экрана читают текст плейсхолдеров. Слепые или слабовидящие пользователи могут и вовсе пропустить вашу подсказку, если их программное обеспечение не обрабатывает текст плейсхолдеров.

Заключение

Пожалуй, самым выгодным решением и для вас, и для ваших посетителей станет лид-форма следующего образца:

Главное правило: заголовки полей и плейсхолдеры должны быть размещены за пределами поля и постоянно видны. Лид-форма — это ключевой элемент на большинстве посадочных страниц, поэтому уделите ей достаточно времени и внимания, чтобы посетители заполняли ее быстро и легко и приносили вам прибыль.

Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.

Напомню, по статистике в Рунете устаревшими браузерами пользуется около 5% пользователей (это для очистки совести, если что). Надеюсь на ваших сайтах они не концентрируются)

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

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

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

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

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

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

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

Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

Ну точно не теряться) Да, действительно, такие браузеры есть. Например, IE8. И да, есть люди-адепты, которые будут им пользоваться всегда. Если нужна составить решение для всех посетителей, то наберитесь ещё немного терпения.

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

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Можно ли добавить placeholder в тег div

Я хотел бы отобразить некоторый текст для пользователя, когда мой элемент div пуст.

Я попытался добавить атрибут placeholder к моему div , но текст не отображается.

Как я могу отобразить сообщение, когда мой элемент div пуст?

Есть много вариантов использования javascript, но если вы хотите сделать это в css.Try:

Я уже ответил на такой вопрос здесь с этим тестом: http://codepen.io/gcyrillus/pen/hzLIE

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

Используя :empty псевдокласс вместе с ::before псевдоэлемент, вы можете добавить местозаполнитель в пустой элемент.

В следующем примере приведен резервный заполнитель для div элементов, которые не имеют атрибута data-placeholder .

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

Конечно, вы можете обернуть ввод в div.

Вы можете видеть это в действии здесь

Посмотрите другие вопросы по меткам html css или Задайте вопрос

Топ-пост этого месяца:  Уголок для сайта
Добавить комментарий