:: Platzhalter - CSS-Tricks

Anonim

Mit dem ::placeholderPseudoelement (oder in einigen Fällen mit einer Pseudoklasse, abhängig von der Browserimplementierung) können Sie den Platzhaltertext eines Formularelements formatieren. Wie in, der Text mit dem placeholderAttribut gesetzt:

Sie können diesen Text in den meisten Browsern mit diesen wenigen vom Hersteller vorangestellten Selektoren formatieren:

::-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; )

Wichtige Warnung: Diese Syntax ist nicht Standard, daher die ganze Namensverrücktheit. Es erscheint überhaupt nicht in der Spezifikation. :placeholder-shownist Standard, und selbst Spezifikationsautoren scheinen zu glauben, ::placeholderdass dies die standardisierte Version sein wird.

Wie bei jedem Pseudo können Sie es nach Bedarf auf bestimmte Elemente beschränken, z.

input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )

Demo

Der Unterschied zwischen :placeholder-shownund::placeholder

:placeholder-showndient zur Auswahl der Eingabe selbst, wenn der Platzhaltertext angezeigt wird. Im Gegensatz zu ::placeholderwelchen Stilen der Platzhaltertext.

Hier ist ein Diagramm:

Ich fand das sehr verwirrend als:

  1. Die Spezifikationen haben nur :placeholder-shownund nicht::placeholder
  2. :placeholder-shown kann sich weiterhin auf die Gestaltung des Platzhaltertextes auswirken, da es sich um ein übergeordnetes Element handelt (z. B. Schriftgröße).

Beachten Sie, dass :placeholder-showneine pseudo - Klasse (es ist ein Element in einem bestimmten Zustand) und ::placeholderist ein Pseudo - Element (eine sichtbare Sache , die nicht wirklich in dem DOM ist). Unterscheidbar durch einfache gegen doppelte Doppelpunkte.

Tab Atkins hat es für mich per E-Mail geklärt:

: Platzhalter angezeigt, da es sich um eine Pseudoklasse handelt, muss ein vorhandenes Element ausgewählt werden. Es wählt die Eingabe aus, wenn Sie sich im Status "Platzhalter anzeigen" befinden. Das :: Platzhalter-Pseudoelement umschließt den eigentlichen Platzhaltertext.

Element oder Klasse?

Diese Funktionalität ist nicht standardisiert. Das bedeutet, dass jeder Browser eine andere Vorstellung davon hat, wie es funktionieren soll.

Firefox hat dies ursprünglich als Pseudoklasse implementiert, es jedoch aus mehreren Gründen geändert. Um es kurz zu machen, mit einer Pseudoklasse kann man nicht so viel anfangen.

Zum Beispiel, wenn Sie die Farbe des Textes ändern möchten, wenn die Eingabe fokussiert ist. Sie würden einen Selektor wie verwenden input:focus::placeholder, den Sie mit einer Pseudoklasse nicht machen könnten (sie stapeln nicht auf die gleiche Weise).

IE10 unterstützt dies als Pseudoklasse und nicht als Element. Alle anderen haben ein Pseudoelement implementiert.

Firefox Platzhalterfarbe

Möglicherweise stellen Sie fest, dass in Firefox die Farbe des Platzhalters im Vergleich zu anderen Browsern verblasst ist. In der Abbildung unten wird Firefox 43 links und Chrome 47 rechts angezeigt:

Die Chrome-Version ist idealerweise der Stil, den wir überall sehen möchten.

Dies liegt daran, dass standardmäßig auf alle Platzhalter in Firefox ein Deckkraftwert angewendet wird. Um dies zu beheben, müssen wir diesen Wert zurücksetzen:

::-moz-placeholder ( opacity: 1; )

Sie können mehr sehen, indem Sie diese Demo in Firefox testen.

Unterstützte Stile

Das Pseudoelement unterstützt das Styling dieser Eigenschaften:

  • font Eigenschaften
  • color
  • background Eigenschaften
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

Die Pseudoklasse unterstützt auch die meisten (wenn nicht alle) dieser Eigenschaften, ist jedoch aus den oben genannten Gründen nicht so flexibel.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
57 19 * Nein 79 10.1

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Verwandte Eigenschaften

Almanach am 22. Mai 2020

: Platzhalter angezeigt

input:placeholder-shown ( border: 5px solid red; ) Geoff Graham