Стилизация плэйсхолдеров
Атрибут 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; >
Как можно переместить то что мы ввели в input в значение placeholder?
Проверить что ввели в поле input
надо проверить что ввел в поле пользователь. текст или число.
Как вывести строку из txt, номер котрой ввели в input?
Здорова народ, тема такая нужно вывести строку из файла txt но только ту котрую ввели в input. .
Как сделать чтобы placeholder у input не пропадал?
Есть input для ввода мобильного телефона, поставил "placeholder +38(0__)__-__-___ " и нужно что бы.
Как присвоить значение которое мы ввели числу
Делаю программу, которая строит график функции. Но тут возникла проблема. Нужно записать выражение.
61 / 44 / 16
Регистрация: 09.02.2019
Сообщений: 149
1 2 3 4 5
let obj = document.querySelector('#inp1'); obj.addEventListener('change',(e)=>{ e.target.placeholder = e.target.value; });
Правда особого смысла не вижу . так как мы все равно не увидим результат .
Регистрация: 14.09.2019
Сообщений: 65
Yura007, а как можно увидеть? У меня задача стоит чтобы после выхода из input тот текст что был написал преобразовался в placeholder
61 / 44 / 16
Регистрация: 09.02.2019
Сообщений: 149
1 2 3 4 5 6 7 8
let obj = document.querySelector('#inp1'); obj.addEventListener('change',(e)=>{ e.target.placeholder = e.target.value; e.target.value = ""; console.log(e.target.placeholder); console.log( e.target.value); });
Добавлено через 3 минуты
когда value будет отсутствовать тогда будем видеть placeholder . Наверное кто то либо неправильно понял задание. Либо кто то написал задание не правильно .
: : placeholder
Псевдоэлемент : : placeholder используется для стилизации текста-подсказки (плейсхолдера) в полях ввода и .
Пример
Скопировать ссылку «Пример» Скопировано
input class="form-input" type="email" placeholder="Например: mygre@ema.il">
.form-input::placeholder color: gray;>
.form-input::placeholder color: gray; >
Как понять
Скопировать ссылку "Как понять" Скопировано
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Два двоеточия и ключевое слово placeholder .
Стиль применится ко всем подсказкам на странице:
::placeholder color: gray;>
::placeholder color: gray; >
Стиль применится только к подсказкам у полей ввода с классом email - input :
.email-input::placeholder color: darkblue;>
.email-input::placeholder color: darkblue; >
Подсказки
Скопировать ссылку "Подсказки" Скопировано
Для стилизации подсказки можно использовать только следующие свойства:
- все шрифтовые свойства, начинающиеся с font (например, font - size или font - style );
- все свойства для работы с фоном, начинающиеся с background - (например, background - color или background - size );
- свойство color ;
- свойства word - spacing , letter - spacing , text - decoration , text - transform и line - height ;
- свойства text - shadow , группу свойств text - decoration и vertical - align .
На практике
Скопировать ссылку "На практике" Скопировано
Денис Ежков советует
Скопировать ссылку "Денис Ежков советует" Скопировано
Желательно стилизовать подсказку таким образом, чтобы визуально она отличалась от введённого текста. Как правило, её делают полупрозрачной, либо просто светлее вводимого текста.
Сдвигающийся плейсхолдер
Данное решение выполнено через псевдокласс :placeholder-shown , который отображает текст подсказки, заданной атрибутом placeholder .
Пример:
HTML:
Атрибут placeholder является пустым, но он необходим, чтобы можно было использовать его псевдокласс :placeholder-shown , при отсутвиии которого можно сдвинуть элемент куда угодно.
CSS:
.placeholder-form < box-sizing : border-box ; width : 320px ; margin : 20px auto ; .placeholder-container < position : relative ; width : 100% ; margin-bottom : 20px ; .placeholder-container input < background-color : #FFF ; border : 2px solid #BFE2FF ; box-sizing : border-box ; color : #000 ; font-size : 16px ; line-height : 16px ; height : 50px ; outline : 0 ; padding : 0 20px ; width : 100% ; .placeholder-container label < color : #000 ; font-family : Verdana, sans-serif ; background-color : #FFF ; font-size : 16px ; line-height : 16px ; padding : 5px 10px ; pointer-events : none ; position : absolute ; transition : all 200ms ; left : 10px ; background-color : #FFF ; .placeholder-container input:focus + label, .placeholder-container input:not(:placeholder-shown) + label < left : 10px ; font-size : 11px ; background-color : #BFE2FF ; padding : 2px 10px ; Нравится 16 В закладки
- Опубликовано: 03.12.2020
- Рубрики: Формы
- Метки: CSS
- 11760 просмотров
Смотрите также:
Слайдер для radio кнопок
jQuery плагин radios-to-slider для создания слайдера из radio кнопок
Запрет отправки формы пока не установлен флажок
Очень простой метод запрета отправки формы пока не установлена галочка checkbox
Автозаполнение для поля input
jQuery плагин Autocomplete для автозаполнения текстовых полей input
Добавить комментарий:
Ваш комментарий отправлен!
Комментарии:
Владимир: 22.04.2022 в 04:51
Здравствуйте. поставил на сайт вашу форму и пытаюсь прописать ваш урок по СДВИГАЮЩИЙСЯ ПЛЕЙСХОЛДЕР. Всё равно как было что пропадает текст с формы так и пропадает. Подскажите, пожалуйста на примере фашей формы как правильно прописать?
Alexander: 22.04.2022 в 16:45
Я не могу ничего подсказать не видя, что у вас получилось.
И хотел бы еще отметить, что в блоге нет уроков, я просто выкладываю свои и чужие идеи со своей точки зрения, плюс стараюсь сделать максимально удобное их применение (в первую очередь для себя). Другими словами тут решения не всегда вставил и готово, иногда нужно уметь это все модифицировать и подстаривать или заказать (благодаря этому и есть возможность делать этот блог).
Владимир: 22.04.2022 в 23:29
Здраствуйте Александр. Сделал вот так
Добавляю
В понедельник скину рабочий пример, было где то такое решение.
Владимир: 24.04.2022 в 18:01
Здравствуйте. Спасибо большое, буду ждать рабочего примера. Вам бы ещё на сайт добавлять видео обзоры, очень даже сильно бы облегчило бы для новичков.