CSS-Formulare

Ein Formularbeispiel: Wir verwenden CSS, um HTML-Formularelemente darzustellen:

CSS-Beispiele

input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4C7EAF; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #4777A6; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }

Selbst ausprobieren »

Eingabefeld (input)-Stile

Verwende die Eigenschaft width, um die Breite des Eingabefelds festzulegen:

CSS-Beispiele

input { width: 100%; }

Selbst ausprobieren »

In den obigen Beispielen ist die Breite aller <input>-Elemente auf 100% gesetzt. Wenn du nur einen bestimmten Eingabetyp festlegen möchtest, kannst du die folgenden Attributselektoren verwenden:

  • input[type=text]- Wählt Texteingabefelder aus
  • input[type=password]- Wählt Passwort-Eingabefelder aus
  • input[type=number]- Wählt Zahlen-Eingabefelder aus
  • ...

Innenabstand von Eingabefeldern

VerwendungpaddingDie Eigenschaft kann Padding innerhalb des Eingabefelds hinzufügen.

CSS-Beispiele

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }

Selbst ausprobieren »

Beachte, dass wirbox-sizingDie Eigenschaft istborder-boxDies stellt sicher, dass der Browser das Eingabefeld mit der angegebenen Breite und Höhe einschließlich Rahmen und Innenabstand darstellt.
Für weitere Inhalte kannst duCSS3 Box Sizing lesen 。

Eingabefeld (input) Rahmen

NutzungborderDie Eigenschaft kann die Größe oder Farbe des Eingabefeldrahmens ändern. Verwendeborder-radiusDie Eigenschaft kann abgerundete Ecken zum Eingabefeld hinzufügen:

CSS-Beispiele

input[type=text] { border: 2px solid red; border-radius: 4px; }

Selbst ausprobieren »

Wenn du nur einen unteren Rahmen hinzufügen möchtest, kannst duborder-bottomEigenschaft:

CSS-Beispiele

input[type=text] { border: none; border-bottom: 2px solid red; }

Selbst ausprobieren »

Eingabefeld (input) Farbe

Sie könnenbackground-colorEigenschaft zum Festlegen der Hintergrundfarbe des Eingabefelds,colorEigenschaft wird verwendet, um die Textfarbe zu ändern:

CSS-Beispiele

input[type=text] { background-color: #3C7CBC; color: white; }

Selbst ausprobieren »

Eingabe (input) Fokus

Standardmäßig zeigen einige Browser einen blauen Umriss, wenn das Eingabefeld den Fokus erhält (beim Klicken auf das Eingabefeld). Wir können den Eingabestil festlegen aufoutline: none;um diesen Effekt zu ignorieren.

Nutzung:focusDer Selektor kann den Stil des Eingabefelds festlegen, wenn es den Fokus erhält:

CSS-Beispiele

input[type=text]:focus { background-color: lightblue; }

Selbst ausprobieren »

CSS-Beispiele

input[type=text]:focus { border: 3px solid #555; }

Selbst ausprobieren »

Eingabe (input) Symbol

Wenn Sie ein Symbol in das Eingabefeld einfügen möchten, können Siebackground-imageEigenschaft und die Positionierungbackground-positionEigenschaft. Beachten Sie: Setzen Sie den linken Außenabstand des Symbols, um ihm etwas Platz zu geben:

CSS-Beispiele

input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; }

Selbst ausprobieren »

Animiertes Suchfeld

Das folgende Beispiel verwendet CSStransitionEigenschaft, die das Eingabefeld so festlegt, dass es sich nach rechts erweitert, wenn es den Fokus erhält. Sie können denCSS AnimationsAbschnitt verwenden, um weitere Inhalte zu sehen.

CSS-Beispiele

input[type=text] { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; }

Selbst ausprobieren »

Stil für Textfeld (textarea)

Hinweis:VerwendungresizeEigenschaft, um die Möglichkeit des Textfelds zur Größenänderung zu deaktivieren (normalerweise durch Ziehen an der unteren rechten Ecke zum Ändern der Größe).

CSS-Beispiele

textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }

Selbst ausprobieren »

Stile für Dropdown-Menü (select)

CSS-Beispiele

select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }

Selbst ausprobieren »

Button-Stile

CSS-Beispiele

input[type=button], input[type=submit], input[type=reset] { background-color: #4C7EAF; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } /*Tipp: Verwenden Sie width: 100%, um die Schaltfläche auf volle Breite zu setzen*/

Selbst ausprobieren »

Weitere Inhalte finden Sie in unseremCSS ButtonsTutorial.

Responsive Formulare

Responsive Formulare können Elemente basierend auf der Größe des Browserfensters skalieren. Wir können die Größe des Browserfensters ändern, um den Effekt zu sehen:

Fortgeschritten:Das folgende Beispiel verwendetCSS3 Media Queries, um ein responsives Formular zu erstellen.

CSS-Beispiele

* { box-sizing: border-box; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #4C7EAF; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #4777A6; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /*Floats löschen*/ .row:after { content: ""; display: table; clear: both; } /*Responsives Layout - Wenn die Bildschirmbreite kleiner als 600px ist, Elemente vertikal stapeln*/ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }

Selbst ausprobieren »
Weitere Erweiterungen