CSS Academy · Lektion

::placeholder, ::selection und ::marker

Formatieren Sie Input-Platzhalter, Textauswahlen und Listenmarkierungen mit Pseudoelementen.

::placeholder, ::selection und ::marker ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

::placeholder

::placeholder formatiert den Platzhaltertext in Formularfeldern und Textarea-Elementen. Es wird nur eine Teilmenge der CSS-Eigenschaften unterstützt.

<input type="text" placeholder="Type your name…" />

Unterstützte ::placeholder-Eigenschaften

Nicht alle CSS-Eigenschaften funktionieren mit ::placeholder. Zu den unterstützten Eigenschaften gehören: color, font-size, font-weight, font-style, letter-spacing, opacity und einige weitere. Layouteigenschaften werden nicht unterstützt.

Barrierefreiheit von Platzhaltern

Platzhaltertext verschwindet, sobald Benutzer etwas eingeben, und sollte NICHT als Ersatz für <label>-Elemente verwendet werden. Stellen Sie für Formularfelder immer sichtbare Beschriftungen bereit. Der Kontrast des Platzhalters muss außerdem das WCAG-Verhältnis von 4,5:1 erfüllen.

::selection

::selection formatiert Text, den Benutzer mit dem Cursor markiert haben. Damit lassen sich gebrandete Markierungsfarben erstellen.

<p>Select this text with your cursor to see the branded highlight color.</p>

Unterstützte Eigenschaften von ::selection

Mit ::selection funktionieren nur wenige Eigenschaften: color, background-color, text-shadow und text-decoration. Andere Eigenschaften werden ignoriert.

::marker

::marker formatiert das Listenzeichen eines Listeneintrags – den Aufzählungspunkt oder die Nummer in <ul>- und <ol>-Listen.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Unterstützte Eigenschaften von ::marker

Zu den unterstützten Eigenschaften von ::marker gehören: color, content, font-size, font-family, font-weight, font-style und unicode-bidi.

Benutzerdefinierte Listenzeichen mit ::marker

Verwenden Sie Emojis oder Sonderzeichen als Listenzeichen:

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

::first-line formatiert die erste dargestellte Zeile eines Blockelements – die tatsächlich dargestellte Zeile, nicht den ersten Zeilenumbruch im HTML. Das ist nützlich für die Gestaltung einleitender Absätze im Stil von Initialen.

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

::first-letter spricht den ersten Buchstaben der ersten formatierten Zeile an. Eine klassische Anwendung sind Initialen in einer magazinartigen Typografie.

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

::cue für die Untertitelgestaltung

::cue formatiert VTT-Untertitel in HTML-<video>-Elementen – ein spezialisiertes, aber wichtiges Pseudoelement für barrierefreie Medien.

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

Kurzer Test

Mit welchem Pseudoelement lassen sich der Aufzählungspunkt oder die Nummer eines Listeneintrags formatieren?

Zusammenfassung

::placeholder formatiert Platzhaltertext in Eingabefeldern. ::selection formatiert markierten Text. ::marker formatiert Aufzählungspunkte und Nummern von Listen. ::first-letter und ::first-line ermöglichen typografische Feinabstimmungen. Alle unterstützen nur eine begrenzte Teilmenge der CSS-Eigenschaften.

Häufig gestellte Fragen

Ist die Lektion „::placeholder, ::selection und ::marker“ kostenlos?

Ja — der vollständige Text von „::placeholder, ::selection und ::marker“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „::placeholder, ::selection und ::marker“?

Formatieren Sie Input-Platzhalter, Textauswahlen und Listenmarkierungen mit Pseudoelementen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „::placeholder, ::selection und ::marker“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy