: Platzhalter angezeigt - CSS-Tricks

Anonim

Die :placeholder-shownPseudoklasse wählt das Eingabeelement selbst aus, wenn Platzhaltertext in einer Formulareingabe vorhanden ist. Betrachten Sie es als eine gute Möglichkeit, zwischen Eingaben, bei denen derzeit Platzhaltertext angezeigt wird, und solchen, bei denen dies nicht der Fall ist, zu unterscheiden.

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

Die Idee hinter Platzhaltern

Textbasierte s und die Eingabe kann Platzhalter - Text hat. Es ist Text, der angezeigt wird, wenn die Eingabe leer ist, um einen möglichen Wert vorzuschlagen. Beispielsweise kann ein Formular, in dem nach einer Schule gefragt wird, eine Bezeichnung für das haben, wonach es gefragt wird. Anschließend wird im Platzhalter als Beispielwert „Forest Hills Example High School“ vorgeschlagen:

School Name:

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- ist 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:

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

Wenn Sie den Platzhaltertext formatieren müssen

Verwenden Sie ::placeholder (verwenden Sie tatsächlich alle verrückten Herstellerpräfixe dafür), die wir hier im Almanach beschrieben haben.

Mehr Informationen

  • Selektoren Level 4 Spec

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
47 51 11 * 79 9

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 9.0-9.2