Oft ist es erforderlich, das bestimmte Daten in einem Inputfeld vom Benutzer nicht geändert werden können. Du kannst ein Input Feld ausgrauen so das man den Wert nur lesen aber nicht bearbeiten kann.

So kannst du ein Eingabefeld (Input) in HTML ausgrauen:

Attribut disabled:

Dies ist die einfachste und gebräuchlichste Methode.

HTML
<input type="text" id="meinEingabefeld" disabled>

Erklärung:

CSS-Eigenschaft opacity:

Mit CSS kannst du die Opazität des Eingabefelds reduzieren, um es grau zu erscheinen.

HTML
#meinEingabefeld {
  opacity: 0.5;
}

Erklärung:

CSS-Eigenschaft filter (nur ältere Browser):

In älteren Browsern kannst du den filter-Effekt verwenden, um das Eingabefeld grau zu färben.

CSS
#meinEingabefeld {
  filter: grayscale(1); /* Grad der Grauabstufung (0 = normal, 1 = komplett grau) */
}

Erklärung:

Zusätzliche Informationen:

Empfehlung:

Verwende das Attribut disabled, wenn du das Eingabefeld vollständig deaktivieren und gleichzeitig ausgrauen möchtest.

Verwende die CSS-Eigenschaft opacity, wenn du das Eingabefeld nur optisch ausgrauen möchtest, aber weiterhin interaktiv lassen willst.

Über mich