Lädt...

CSS Formularsteuerelemente

Formulare sind der Ort zum Tippen, Wählen und Senden. CSS kann input, textarea und select klarer und ruhiger machen — lesbares Padding, ordentliche Rahmen und ein Fokus-Hinweis, den man wirklich sieht — während HTML die Semantik behält.

Ein Toolkit für Formularelemente

📊 Formularelemente auf einen Blick

Teil Alltagsjob
input / textarea / select Die Hauptkontrollen, die Sie gemeinsam stylen
padding + border Feldern Raum und eine klare Kante geben
border-radius Ecken weicher machen
:focus-visible Sichtbaren Fokusring für Tastatur/Zeiger zeigen
:disabled Felder dämpfen, die gerade nicht editierbar sind

Stylen Sie eine gemeinsame Klasse (oder Elementgruppe) einmal, damit jedes Feld zur selben Familie gehört. Button-Optik kommt in der nächsten Lektion.

Text-Inputs — Raum und Kanten

Standard-Browser-Inputs wirken geräteübergreifend oft uneinheitlich. Width, Padding, Schriftgröße und leichter Rahmen machen Tippen angenehm.

Basis-Textinput

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — Platz zum Schreiben

Textareas brauchen Höhe und dieselbe Padding-Sprache wie Inputs. Erlauben Sie vertikales Resize bei langen Antworten; sperren Sie es, wenn das Layout fest bleiben muss.

Bequeme Textarea

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — gleiche Familie

Dropdowns sollten Rahmen, Radius und Padding mit Textfeldern teilen, damit das Formular nicht zusammengeflickt wirkt.

Select in derselben Familie

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Fokus, den man sieht

Entfernen Sie Fokusstile nie ohne Ersatz. :focus-visible zeichnet einen klaren Ring für Tastatur-Nutzer und bleibt optisch ruhig.

Sichtbarer Fokusring

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Deaktivierte Felder

Disabled-Kontrollen sollen unerreichbar wirken — niedrigere Opacity oder gedämpfter Hintergrund — ohne aus dem Layout zu verschwinden.

Disabled-Ton

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

Eine ruhige Feld-Gewohnheit

Einen gemeinsamen Feldstil behalten, Label-Abstand respektieren, Fokus bewahren und Button-Kosmetik der Buttons-Lektion überlassen.

Gemeinsame Feldklasse

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Selbst ausprobieren

  1. Text-/E-Mail-Inputs mit Padding, Border und border-radius stylen.
  2. textarea angleichen; resize: vertical setzen.
  3. Ein select mit derselben Rahmenfamilie stylen.
  4. :focus-visible-Outline + Rahmenfarbe — kein nacktes outline: none.
  5. Ein :disabled-Input dämpfen und prüfen, dass es noch wie ein Feld wirkt.

Häufige Fehler

  • outline: none ohne Fokusersatz (Tastatur-Nutzer verlieren Orientierung)
  • Winziges Padding / kleine Schrift macht mobiles Tippen schmerzhaft
  • Jede Kontrolle anders stylen, sodass das Formular zufällig wirkt
  • Diese Lektion in Button-Design verwandeln (kommt als Nächstes)
  • Mit Tabellen-border-collapse / Zebra vermischen (vorherige Sitzung)

Kurzfassung

  • Gemeinsames Padding, Border und Radius vereinen Inputs, Textareas und Selects
  • Textareas Höhe und sinnvolles Resize geben
  • Sichtbares :focus-visible behalten
  • :disabled-Felder dämpfen, nicht verstecken
  • Button-Optik der nächsten Lektion überlassen

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 33 von 35
Css Tutorial