:-moz-placeholder

Hinweis: Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des ::-moz-placeholder Pseudoelements.
Hinweis:Die CSSWG hat beschlossen, :placeholder-shown einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. Bug 1069012

Unerwünscht
Dieses Feature wurde aus den Webstandards entfernt. Obwohl manche Browser es immer noch unterstützen, wird es zukünftig wegfallen. Es sollte daher nicht mehr in alten oder neuen Projekten verwendet werden. Webseiten oder Webapps, die es benutzen, funktionieren möglicherweise irgendwann nicht mehr korrekt.

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Übersicht

Die :-moz-placeholder Pseudoklasse repräsentiert ein Formularelement, das Platzhaltertext anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.

Beispiel

Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.

<!DOCTYPE html>
<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

Ergibt:

Überlauf

Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines <input> Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft text-overflow: ellipsis! verwendet werden, um den Text mit einer Ellipse abzuschließen.

input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }

David Walsh hat dies in seinem Blog Eintrag "Placeholders and Overflow" beschrieben.

Spezifikationen

Nicht Teil einer Spezifikation.

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung Nicht unterstützt 4.0 (2.0)[1] Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung Nicht unterstützt ? Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] Implementiert in Bug 457801.

Siehe auch