CSS-Formular

Durch die Verwendung von CSS kann das Aussehen von HTML-Formularen erheblich verbessert werden:

Probieren Sie es selbst aus

Setzen Sie den Stil des Eingabefelds

Verwenden Sie width Eigenschaft, um die Breite des Eingabefelds zu bestimmen:

Beispiel

input {
  width: 100%;
}

Probieren Sie es selbst aus

Der obige Beispiel gilt für alle <input>-Elemente. Wenn Sie nur den Stil eines bestimmten Eingabetyps setzen möchten, können Sie den Attribut-Selektor verwenden:

  • input[type=text] - Wählt nur Textfelder aus
  • input[type=password] - Wählt nur Passwortfelder aus
  • input[type=number] - Wählt nur numerische Felder aus
  • u.v.a.

Füllen Sie das Eingabefeld aus

Verwenden Sie padding Eigenschaft im Textfeld ein Raum hinzufügen.

Hinweis:Wenn viele Eingaben vorhanden sind, können Sie möglicherweise auch einen Außenabstand hinzufügen, um mehr Platz außerhalb von ihnen hinzuzufügen:

Beispiel

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

Probieren Sie es selbst aus

Bitte beachten Sie, dass wir box-sizing Eigenschaft auf border-boxdiesem Fall sicherzustellen, dass die gesamte Breite und Höhe des Elements die Innenabstände (Füllung) und die endgültige Kante einschließen.

Bitte in unseren CSS Box Sizing In diesem Kapitel lernen Sie über box-sizing mehr über die Eigenschaft zu erfahren.

Eingabefelder mit Rahmen

Bitte verwenden Sie border Eigenschaft die Dicke und Farbe des Rahmens ändern und verwenden border-radius Eigenschaft Rundencken hinzufügen:

Beispiel

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

Probieren Sie es selbst aus

Wenn nur die untere Kante benötigt wird, verwenden Sie border-bottom Eigenschaft:

Beispiel

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

Probieren Sie es selbst aus

farbige Eingabefelder

Bitte verwenden Sie background-color Eigenschaft dem Eingabefeld eine Hintergrundfarbe hinzufügen und verwenden color Eigenschaft die Textfarbe ändern:

Beispiel

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

Probieren Sie es selbst aus

dem fokussierten Eingabefeld

Standardmäßig fügen einige Browser bei Erhalt des Fokus (Klicken) eine blaue Kontur um das Eingabefeld hinzu. Sie können durch Hinzufügen von outline: none; um dieses Verhalten zu beseitigen.

Verwenden Sie :focus Der Selector kann ein Stil setzen, wenn das Eingabefeld den Fokus erhält:

Beispiel 1

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

Klicken Sie im Textfeld darauf:

Probieren Sie es selbst aus

Beispiel 2

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

Klicken Sie im Textfeld darauf:

Probieren Sie es selbst aus

Eingabefeld mit Symbol/Bild

Wenn Sie ein Symbol im Eingabefeld haben möchten, verwenden Sie background-image Eigenschaft und setzen Sie sie zusammen mit background-position Eigenschaften zusammen einstellen. Beachten Sie auch, dass wir einen größeren linken Innenabstand (padding-left) hinzugefügt haben, um Platz für das Symbol zu lassen:

Beispiel

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

Probieren Sie es selbst aus

Suchfeld mit Animationseffekt

In diesem Beispiel verwenden wir CSS transition Eigenschaft für die Breitenänderung des Suchfelds bei Fokus setzen, um Animation zu erzeugen. Später werden Sie in unseren CSS Übergang In diesem Kapitel haben Sie mehr über transition Kennis der Eigenschaften.

Beispiel

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

Probieren Sie es selbst aus

Stellen Sie das Aussehen der Textfelder ein

Hinweis:Verwenden Sie resize Die Eigenschaft verhindert, dass die Textbereiche vergrößert oder verkleinert werden können (Deaktiviert den ‘Greifer’ im rechten unteren Ecke):

Beispiel

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

Probieren Sie es selbst aus

Stellen Sie das Aussehen des Auswahlspezialmenüs ein

Beispiel

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

Probieren Sie es selbst aus

Stellen Sie das Aussehen der Eingabetasten ein

Beispiel

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Hinweis: Verwenden Sie width: 100%, um einen vollständigen Breiten-Button zu erstellen */

Probieren Sie es selbst aus

Für mehr Informationen darüber, wie Sie mit CSS Button-Stile einrichten, lesen Sie unsere CSS Button Tutorials.

Responsive Menu

Passen Sie die Größe des TIY-Editor-Fensters an, um die Ergebnisse zu sehen. Wenn die Bildschirmbreite weniger als 600 Pixel beträgt, werden die beiden Spalten vertikal übereinander gestapelt anstatt horizontal nebeneinander.

Fortgeschritten: Die folgenden Beispiele verwenden Media-Abfragen Um ein responsives Formular zu erstellen. In dem nächsten Kapitel werden Sie mehr darüber lernen.

Antwortmenü anzeigen