Как добавить placeholder через css
Перейти к содержимому

Как добавить placeholder через css

  • автор:

Атрибут ::placeholder CSS

Псевдоэлемент ::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

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

::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: pink; >::-moz-placeholder < /* Firefox 19+ */ color: pink; >:-ms-input-placeholder < /* IE 10+ */ color: pink; >:-moz-placeholder < /* Firefox 18- */ color: pink; >

Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

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

input[type=»email»].big-dog::-webkit-input-placeholder

Обновлено: 2022-04-19 17:18:17 Валентин Сейидов автор материала

Разница между :placeholder-shown и ::placeholder

:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

Взгляните на диаграмму:

Разница между :placeholder-shown и ::placeholder

Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

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

Элемент или класс?

В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

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

Цвет заглушки в Firefox

Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

Цвет заглушки в Firefox

Так происходит потому, что по умолчанию все « заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

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

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

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

 type="email" placeholder="example@gmail.com">

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

Стилизация

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

::-webkit-input-placeholder  color: blue; > ::-moz-placeholder  color: blue; > /* Firefox 19+ */ :-moz-placeholder  color: blue; > /* Firefox 18- */ :-ms-input-placeholder  color: blue; >

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

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

@mixin placeholder  &::-webkit-input-placeholder  @content; > &:-moz-placeholder  @content; > &::-moz-placeholder  @content; > &:-ms-input-placeholder  @content; > >

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

// Глобально для каждого поля ввода @include placeholder  color: blue; > // Для определённых полей ввода .input  @include placeholder  color: green; > >
Пример

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

.blue-text::-webkit-input-placeholder  color: #2e8ece; > .blue-text:-moz-placeholder  color: #2e8ece; > .blue-text::-moz-placeholder  color: #2e8ece; > .blue-text:-ms-input-placeholder  color: #2e8ece; >

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

Не каждое 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 :

.input  @include placeholder  // Стили для нормального состояния > &:focus  @include placeholder  // Стили после события focus > > >

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

.input  @include placeholder  color: #aaa; opacity: 1; transition: opacity 300ms; > &:focus  @include placeholder  opacity: 0; > > >

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

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

.input  @include placeholder  text-indent: 0px; transition: text-indent 300ms; > &:focus  @include placeholder  text-indent: 500px; > > >

Сдвиг вниз

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

.input  @include placeholder  text-indent: 0px; transition: text-indent 300ms; > &:focus  @include placeholder  text-indent: 500px; > > >

Всё вместе

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

@mixin placeholder  &::-webkit-input-placeholder @content> &:-moz-placeholder @content> &::-moz-placeholder @content> &:-ms-input-placeholder @content> > @mixin pl-shift($side: left, $position: 500px, $duration: 200ms)  @include placeholder  text-indent: 0; transition: text-indent $duration; > &:focus  @include placeholder  text-indent: if($side == left, -$position, $position); > > > @mixin pl-slide-down($position: 5, $duration: 200ms)  @include placeholder  line-height: 1; transition: line-height $duration; > &:focus  @include placeholder  line-height: $position; > > > @mixin pl-fade-out($duration: 200ms)  @include placeholder  opacity: 1; transition: opacity $duration; > &:focus  @include placeholder  opacity: 0; > > >

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

// Для отдельных элементов .pl-shift-right  @include pl-shift( right ); > .pl-fade-out  @include pl-fade-out; > // Для всего остального @include pl-shift( left );

Autoprefixer

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

::placeholder  color: orange; > .input::placeholder  color: blue; >

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

Что дальше

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

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

.input:placeholder-shown  color: blue; >

Вывод ::placeholder поверх input средствами css

введите сюда описание изображения

Подскажите, как сделать placeholder над рамкой input ? z-index не работает. Оставил его в коде на всякий случай. Есть вариант использовать span или label с абсолютным позиционированием но label уже занят, а лишние элементы не хотелось бы вводить без необходимости. Хочется сделать так:

form < display: flex; flex-direction: column; >input < width: 200px; height: 30px; >input::placeholder < transition-duration: .3s; background-color: white; padding: 3px; z-index: 100; >input:focus::placeholder
  

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

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

::placeholder

Пошаговый план! Как быстро научиться создавать сайты!

  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Примеры

Стилизация псевдоэлемента ::placeholder

В этом примере мы изменим цвет текста placeholder, а так же при :focus на input, мы плавно скроем placeholder, используя opacity и плавное изменение этого свойства через transition

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *