:-moz-placeholder

von 1 Mitwirkenden:

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.

Hinweis: Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des ::-moz-placeholder Pseudoelements.

« CSS « CSS Referenz « Mozilla Erweiterungen

Ü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.

Bugzilla

Bug 457801

Hinweise

Hinweis: Dies wurde zuvor aus einem völlig anderen Grund fälschlicherweise als mit Gecko 1.9 (Firefox 3) eingeführt beschrieben.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz
Zuletzt aktualisiert von: Sebastianz,