Най ::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ще бъде стандартизираната версия.
Както всяко psuedo, можете да го обхванете към определени елементи, ако е необходимо, като:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Демонстрация
Разликата между :placeholder-shownи::placeholder
:placeholder-shownе за избиране на самия вход, когато се показва текстът му на заместител. За разлика от ::placeholderкои стилове текстът на заместител.
Ето диаграма:
Намерих това за много объркващо като:
- спецификациите имат само
:placeholder-shownи не::placeholder :placeholder-shownвсе още може да повлияе на стила на заместващия текст, тъй като е родителски елемент (напр. размер на шрифта).
Имайте предвид, че :placeholder-shownе псевдо клас (това е елемент в определено състояние) и ::placeholderе псевдо елемент (видимо нещо, което всъщност не е в DOM). Разграничава се от единични срещу двойни двоеточия.
Tab Atkins ми го изчисти по имейл:
: placeholder-показано, като псевдоклас, трябва да избере съществуващ елемент - той избира входа, когато сте в състояние на показване на placeholder. Псевдоелементът :: placeholder обгръща действителния текст на заместител.
Елемент или клас?
Тази функционалност не е стандартизирана. Това означава, че всеки браузър има различна представа за това как трябва да работи.
Първоначално Firefox внедри това като псевдо клас, но го промени по куп причини. За да направим дълга история, не можете да направите толкова много с псевдо клас.
Например, ако искате да промените цвета на текста, когато въведеното е фокусирано. Бихте използвали селектор като input:focus::placeholder, което не бихте могли да направите с псевдо клас (те не се подреждат по същия начин).
IE10 поддържа това като псевдо клас, а не като елемент. Всички останали са внедрили псевдо елемент.
Цвят на резервоар за Firefox
Може да забележите как във Firefox цветът на заместителя изглежда избледнял в сравнение с други браузъри. На изображението по-долу Firefox 43 е показан отляво, докато Chrome 47 е показан отдясно:
Това е така, защото по подразбиране всички заместители във Firefox имат стойност на непрозрачност, приложена към тях, така че за да поправим това, трябва да нулираме тази стойност:
::-moz-placeholder ( opacity: 1; )Можете да видите повече, като тествате тази демонстрация във Firefox.
Поддържани стилове
Псевдоелементът поддържа стилизиране на тези свойства:
fontИмотиcolorbackgroundИмотиword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Псевдо класът поддържа и повечето (ако не всички) от тези свойства, но не е толкова гъвкав поради гореописаните причини.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 57 | 19 * | Не | 79 | 10.1 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Свързани свойства
Алманах на 22 май 2020 г.: показан заместител
input:placeholder-shown ( border: 5px solid red; ) 
Джеф Греъм