css mit Adi Prinz

Platzhaltertext gestalten

Der Platzhaltertext wird im HTML mit dem Attribut placeholder festgelegt.

<label for="placeholder-name">Name</label>

<input
  type="text"
  id="placeholder-name"
  placeholder="Vorname und Nachname"
>
    

Mit ::placeholder kann anschließend das Aussehen dieses Hinweistextes verändert werden:

.placeholder-example input::placeholder {
  color: #6f42c1;
  font-style: italic;
  opacity: 1;
}
    

Die Eigenschaft opacity: 1 sorgt dafür, dass der Browser den Platzhaltertext nicht automatisch blasser darstellt.

::placeholder bei Textbereichen

Das Pseudoelement kann nicht nur bei <input>-Elementen, sondern auch bei einem <textarea> verwendet werden.

.placeholder-example textarea::placeholder {
  color: #6c757d;
  font-style: italic;
}
    

Gestaltung abhängig vom Zustand

::placeholder kann mit Pseudoklassen wie :focus kombiniert werden. Dadurch lässt sich der Platzhaltertext verändern, sobald das Eingabefeld den Fokus erhält.

.placeholder-focus-example input::placeholder {
  color: #6c757d;
  transition: color 0.2s ease;
}

.placeholder-focus-example input:focus::placeholder {
  color: #adb5bd;
}
    

Der Platzhalter bleibt beim Fokussieren sichtbar, wird aber etwas heller. Sobald der Benutzer Text eingibt, verschwindet er automatisch.

::placeholder und :placeholder-shown

::placeholder und :placeholder-shown dürfen nicht verwechselt werden:

/* Gestaltet den Platzhaltertext */
.placeholder-shown-example input::placeholder {
  color: #6f42c1;
}

/* Gestaltet das gesamte noch leere Eingabefeld */
.placeholder-shown-example input:placeholder-shown {
  border-color: #6f42c1;
  background-color: #f5f0ff;
}
    

Geeignete CSS-Eigenschaften

Für ::placeholder werden hauptsächlich Eigenschaften zur Textgestaltung verwendet.

Hinweis zur Barrierefreiheit

Ein Platzhalter ist kein Ersatz für eine sichtbare Beschriftung. Er verschwindet bei der Eingabe und ist häufig schwächer dargestellt als normaler Text.

<label for="email">E-Mail-Adresse</label>
<input
  type="email"
  id="email"
  placeholder="name@beispiel.at"
>
    

Schaltfläche eines Datei-Eingabefeldes gestalten

Ein Datei-Eingabefeld wird mit type="file" erstellt. Der Browser zeigt darin eine Schaltfläche zum Auswählen einer Datei an.

<label for="file-basic">Datei auswählen</label>
<input type="file" id="file-basic">
    

Über ::file-selector-button wird ausschließlich die integrierte Schaltfläche angesprochen:

.file-selector-example input::file-selector-button {
  margin-right: 1rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 0.375rem;
  background-color: #6f42c1;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
    

Hover- und Fokuszustand

Das Pseudoelement kann mit Pseudoklassen des Datei-Eingabefeldes kombiniert werden. Dadurch reagiert die Schaltfläche auf Maus und Tastatur.

.file-selector-state-example input::file-selector-button {
  background-color: #6f42c1;
  color: #fff;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.file-selector-state-example input:hover::file-selector-button {
  background-color: #59359a;
}

.file-selector-state-example input:active::file-selector-button {
  transform: translateY(1px);
}

.file-selector-state-example input:focus-visible {
  outline: 0.2rem solid rgba(111, 66, 193, 0.35);
  outline-offset: 0.2rem;
}
    

Dateitypen mit accept einschränken

Das Attribut accept gibt an, welche Dateitypen im Dateiauswahldialog bevorzugt angeboten werden sollen.

<input
  type="file"
  id="file-document"
  accept=".pdf,.doc,.docx"
>
    

Mehrere Dateien auswählen

Mit dem booleschen Attribut multiple kann der Benutzer mehrere Dateien in einem Durchgang auswählen.

<input
  type="file"
  id="file-multiple"
  accept="image/*"
  multiple
>
    

Die genaue Beschriftung des Datei-Eingabefeldes wird vom Browser und vom Betriebssystem bestimmt.

Geeignete CSS-Eigenschaften

Die Schaltfläche kann weitgehend wie eine gewöhnliche Schaltfläche gestaltet werden.

Hinweis zur Barrierefreiheit

Das Datei-Eingabefeld sollte eine sichtbare und eindeutig zugeordnete Beschriftung besitzen. Hinweise zu erlaubten Dateitypen und zur maximalen Dateigröße gehören in normalen HTML-Text.

<label for="file-accessible">Lebenslauf hochladen</label>

<p id="file-help">
  Erlaubt sind PDF-Dateien bis maximal 5 MB.
</p>

<input
  type="file"
  id="file-accessible"
  accept=".pdf"
  aria-describedby="file-help"
>