::placeholderПсеудо елемента (или псеудо класе, у неким случајевима, у зависности од реализације прегледача) вам омогућава да стил чувара места текст елемент форме. Као у, текст постављен са 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 ( color: orange; )Демо
Разлика између :placeholder-shownи::placeholder
:placeholder-shownје за одабир самог уноса када се приказује његов текст резервираног места. Насупрот ::placeholderкојим стиловима се чува текст.
Ево дијаграма:
Ово ме је збунило као:
- наочаре имају само
:placeholder-shownа не::placeholder :placeholder-shownи даље може утицати на стил текста резервираног места, јер је надређени елемент (нпр. величина фонта).
Имајте на уму да :placeholder-shownје псеудо класа (то је елемент у одређеном стању) и да ::placeholderје псеудо елемент (видљива ствар која заправо није у ДОМ-у). Препознатљив по двоструким и двотачкама.
Таб Аткинс ми је то рашчистио путем е-поште:
: резервирано место-приказано, као псеудо-класа, мора да изабере постојећи елемент - бира улаз кад год сте у стању приказивања чувара места. Псеудо-елемент :: плацехолдер обавија стварни текст резервираног места.
Елемент или класа?
Ова функционалност није стандардизована. То значи да сваки прегледач има другачију идеју о томе како треба да ради.
Фирефок је ово првобитно применио као псеудо класу, али га је променио из гомиле разлога. Да скратим причу, не можете толико много да урадите са псеудо класом.
На пример, ако желите да промените боју текста када је унос фокусиран. Користили бисте селектор лике input:focus::placeholder, што не бисте могли да урадите са псеудо класом (они се не слажу на исти начин).
ИЕ10 ово подржава као псеудо класу, а не као елемент. Сви остали су применили псеудо елемент.
Фирефок боја резервираног места
Можда ћете приметити како у Фирефоку боја чувара места изгледа бледе у поређењу са другим прегледачима. На доњој слици, Фирефок 43 је приказан лево, док је Цхроме 47 приказан десно:
То је зато што по дефаулту сва чувара места у Фирефок-у имају вредност непрозирности која је примењена на њих, па да бисмо то поправили, морамо ресетовати ту вредност:
::-moz-placeholder ( opacity: 1; )Можете видети више тестирањем ове демонстрације у Фирефоку.
Подржани стилови
Псеудо елемент подржава стил ових својстава:
fontсвојстваcolorbackgroundсвојстваword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Псеудо класа такође подржава већину (ако не и сва) ових својстава, али није толико флексибилна из горе наведених разлога.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 57 | 19 * | Не | 79 | 10.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Повезана својства
Алманах 22. маја 2020: резервирано место-приказано
input:placeholder-shown ( border: 5px solid red; ) 
Геофф Грахам