1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. Jetzt mach mal Platz! Placeholder im CSS verwenden

Jetzt mach mal Platz! Placeholder im CSS verwenden

placeholder

Jetzt mach mal Platz! Placeholder im CSS verwenden

Die Arbeit mit und an einem Code kann langwierig sein, gerade, wenn man so viele Sachen zur gleichen Zeit beachten muss: Position, Gradient, Padding … Dabei kann das Platzieren eines Placeholders Erleichterung schaffen. Doch: Was ist ein Placeholder? Wozu verwendet man ihn? Und wie platziert man ihn?

Was ist ein Placeholder?

Placeholder – zu Deutsch: Platzhalter – stellen eine großartige Möglichkeit dar, Deinen Code sauber und organisiert zu halten. Durch die Verwendung von Platzhaltern kannst Du angeben, wo bestimmte Elemente platziert später werden sollen, ohne zusätzliche CSS-Klassen oder IDs hinzufügen zu müssen. Dies kann besonders bei der Arbeit mit Grid-Systemen hilfreich sein.

Welchem Zweck dient er?

Wie die Bezeichnung suggeriert, wird er vor allem dazu gebraucht, Platz für später eingegebene Elemente auf einer Webseite zu schaffen. Das kann vor allem Texte betreffen, die nachträglich eingefügt werden, oder Ähnliches. Auf diese Weise ist es beispielsweise möglich, dass man sich zuerst um die Farbgestaltung der Webseite kümmert, bevor man den Inhalt genauer definiert.

Wie nutzt man Platzhalter?

Normalerweise reicht es aus, wenn man die Platzhalter in folgendem Format im Code angibt:

::placeholder;

Danach folgen in der Regel die entsprechenden Eigenschaften, die man dem späteren Text, der an der Stelle des Platzhalters stehen soll, zuschreibt. Dazu zählt zum Beispiel die Farbe.

Der Eingabebefehl würde dann in diesem Fall wie folgt aussehen:

::placeholder {
css declaration;
}

Um den Text für den Platzhalter bereits in ersten Schritten zu gestalten, kannst Du, wie gesagt, bereits bestimmte Werte setzen und Eigenschaften setzen. Um zum Beispiel den Platzhaltertext später rot zu machen, würde man das folgende CSS verwenden:

::placeholder { 
color: red; 
}

Oder Du nutzt die CSS-Eigenschaft opacity verwenden, um den Platzhaltertext halbtransparent zu machen. Um den Platzhaltertext zum Beispiel zu 50 % transparent zu machen, gibt man den folgenden Befehl im Code ein:

::placeholder { 
opacity: 0.5; 
}

Weiterhin kannst Du die Eingabe des Platzhalters nutzen, um den Platzhaltertext bestimmter Eingabetypen zu formatieren. Willst Du zum Beispiel den Platzhaltertext eines Kennworteingabefelds formatieren, sieht die entsprechende Stelle im Code wie folgt aus:

[type=password]
::placeholder { 
color: red; 
}

Auch das Hinzufügen eines Placeholders in einem DIV-Tag ist möglich. Man würde es folgendermaßen schreiben:

div: empty-before { 
content:attri(data-placeholder); 
css declaration 
} 

Der Platzhalter wird in allen gängigen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Auf einen Blick

Platzhalter ermöglichen es, den Platz im Code freizuhalten für später eingefügte Elemente. Das ist vor allem in Hinblick auf die Erstellung einer Webseite, zum Beispiel am Laptop, wichtig, die nach und nach aufgebaut wird. Auch kannst Du Dich dadurch mit der Fertigstellung des Codes beim Programmieren weitermachen.

Den entsprechenden Platzhaltertext, der im Nachgang eingefügt wird, kann man bereits vorformatieren und gestalten. Je nachdem, welche Eigenschaft oder welchen Wert man dem späteren Element (zum Beispiel einem Text) zuschreiben möchte, kann man zum Beispiel die Farbe des Platzhaltertextes spezifisch festlegen.

FAQ zu Placeholder

Wie erstellt man einen Platzhalter in CSS?

Einen Placeholder erstellt man im CSS durch die Eingabe von ::placeholder. Man kann den späteren Platzhaltertext mit weiteren Eigenschaften und Werten bereits gestalten und wurde das an dieser Stelle im Code dahinter setzen.

Kann ich einen Platzhalter in CSS hinzufügen?

Ja, möglich ist das Hinzufügen eines Placeholders im CSS-Code.

Kann ich einen Platzhalter in DIV einfügen?

Möglich ist die Eingabe in DIV ebenfalls.

Wie kann ich einen Platzhalter in HTML und CSS bearbeiten?

Die Eingabe eines Placeholders ist sowohl in HTML- als auch in CSS-Codes umsetz- und gestaltbar. Wie es in CSS klappt, ist oben erklärt. Bei HTML-Formationen ist das Vorgehen ähnlich. Dort würde die Eingabe eines Platzhalters im Code innerhalb des Input-Befehls (<input> stattfinden.

Ähnliche Beiträge