Eingabefeld
Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 52 von 76.
Aufgabe
EinfachIn dieser Lektion werden wir das Erscheinungsbild der Eingabefelder verbessern, um sie benutzerfreundlicher zu gestalten.
Style die <input>-Felder. Befolge die folgenden Schritte:
- Mache sie 100% breit, damit sie gut in das Formular passen.
- Füge padding hinzu, damit der Text im Inneren nicht die Ränder berührt.
- Wende einen border mit einer weichen Farbe an.
- Mache die Ecken abgerundet.
- Füge etwas margin zwischen den Eingabefeldern hinzu, damit sie nicht zu nah beieinander liegen.
- Verwende box-sizing: border-box;, damit die Breite das Padding und die Rahmen einschließt.
Probier es selbst
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Alle Lektionen in Styling with CSS
4Text-Grundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge14Abschluss-Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung9Flexbox
Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder