::placeholderElementem pseudo (lub pseudo klasy, w niektórych przypadkach, w zależności od implementacji przeglądarki) pozwala projektować tekst zastępczy elementu formularza. Tak jak w przypadku tekstu ustawionego z placeholderatrybutem:
Możesz stylizować ten tekst w większości przeglądarek za pomocą tego zestawu selektorów z prefiksem dostawcy:
::-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; )Ważne ostrzeżenie: ta składnia jest niestandardowa, stąd całe szaleństwo nazewnictwa. W ogóle nie pojawia się w specyfikacji. :placeholder-shownjest standardem i nawet autorzy specyfikacji wydają się sądzić ::placeholder, że będzie to wersja standardowa.
Jak każdy pseudo, możesz w razie potrzeby ograniczyć go do określonych elementów, takich jak:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Próbny
Różnica między :placeholder-showni::placeholder
:placeholder-shownsłuży do wybierania samego wejścia, gdy jest wyświetlany jego tekst zastępczy. W przeciwieństwie do ::placeholderstylów tekstu zastępczego.
Oto diagram:
Uznałem to za bardzo zagmatwane, ponieważ:
- Specyfikacje mają tylko
:placeholder-showni nie::placeholder :placeholder-shownmoże nadal wpływać na stylizację tekstu zastępczego, ponieważ jest to element nadrzędny (np. rozmiar czcionki).
Należy pamiętać, że :placeholder-shownjest pseudo klasy (jest to element w danym stanie) i ::placeholderjest pseudo elementem (widoczny rzeczą, która tak naprawdę nie jest w DOM). Można je odróżnić pojedynczymi dwukropkami w porównaniu z podwójnymi.
Tab Atkins wyjaśnił mi to przez e-mail:
: pokazany jako symbol zastępczy, będąc pseudoklasą, musi wybierać istniejący element - wybiera wejście, gdy jesteś w stanie wyświetlania symbolu zastępczego. Pseudoelement :: placeholder otacza rzeczywisty tekst zastępczy.
Element czy klasa?
Ta funkcja nie jest znormalizowana. Oznacza to, że każda przeglądarka ma inny pomysł na to, jak powinna działać.
Firefox pierwotnie zaimplementował to jako pseudoklasę, ale zmienił to z kilku powodów. Krótko mówiąc, z pseudoklasą nie można zrobić tyle.
Na przykład, jeśli chcesz zmienić kolor tekstu, gdy fokus jest wprowadzany. Użyłbyś takiego selektora input:focus::placeholder, którego nie byłbyś w stanie zrobić z pseudoklasą (nie stosują się w ten sam sposób).
IE10 obsługuje to raczej jako pseudoklasę niż element. Wszyscy inni zaimplementowali pseudoelement.
Kolor zastępczy przeglądarki Firefox
Możesz zauważyć, że w przeglądarce Firefox kolor symbolu zastępczego wygląda na wyblakły w porównaniu z innymi przeglądarkami. Na poniższym obrazku Firefox 43 pokazano po lewej stronie, a Chrome 47 po prawej:
Dzieje się tak, ponieważ domyślnie wszystkie symbole zastępcze w przeglądarce Firefox mają zastosowaną wartość krycia, więc aby to naprawić, musimy zresetować tę wartość:
::-moz-placeholder ( opacity: 1; )Możesz zobaczyć więcej, testując to demo w przeglądarce Firefox.
Obsługiwane style
Pseudoelement obsługuje stylizację tych właściwości:
fontnieruchomościcolorbackgroundnieruchomościword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Pseudo klasa obsługuje również większość (jeśli nie wszystkie) z tych właściwości, ale nie jest tak elastyczna z powodów przedstawionych powyżej.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 57 | 19 * | Nie | 79 | 10.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Powiązane właściwości
Almanach 22 maja 2020 r: pokazano symbol zastępczy
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham