forum Sea of Sin / Startseite sitemap

Sea of Sin / Blog

Zentrum der Langeweile

HTML5 Placeholder

2011/07/14 von de_henne
Eines meiner lieblings Erweiterungen, die HTML5 mitbringt, ist ganz klar das placeholder Attribute bei input Feldern.

Das Placeholder Attribute ist eine Art Platzhaltertext, falls in dem Textfeld noch nichts eingegeben wurde. Sobald reingeklickt wird, verschwindet der Text.

  1. <input type=text“ placeholder=“Vorname“ />




Im Urzustand ist der Text gräulich, schaut schick aus aber auch das kann geändert werden.
Einige Browser unterstützen das Formatieren dieses Textes, alle grossen bis auf IE :-) Jedenfalls ist mir es im Internet Explorer nicht bekannt.

Leider kochen die Browser hier wieder ihr eigenes Süppchen.

Für mozilla:

  1. input:-moz-placeholder {}


Für webkit:

  1. input::-webkit-input-placeholder {}


Kombinieren beider Eigenschaften geht nicht, also es müssen beide separat behandelt werden.


Was kann man nun machen?


Jede Menge, von Farbe, Hintergrund, Rahmen, Textgrösse ist ziemlich viel möglich.
Ich habe hier einmal eine Liste gemacht, in welchem Browser was möglich ist.



Chrome 10 / 11

Firefox 4
Safari 5
background-color
-

+
+
border
-

+
+
color
+

+
+
font-size
+
+
+
font-style
+

+
+
letter-spacing
+

+
+
padding top / bottom
-
+
+
padding left / right
-
+
-
text-decoration
-
+
+
text-transform
-
+
+


+ = yes / ja

- = no / nein


  • Keine Kommentare