CSS -Formulare
Das Aussehen eines HTML-Formulars kann mit CSS stark verbessert werden:
Eingabefelder gestalten
Verwenden Sie die widthEigenschaft, um die Breite des Eingabefelds zu bestimmen:
Beispiel
input
{
width: 100%;
}
Das obige Beispiel gilt für alle <input>-Elemente. Wenn Sie nur einen bestimmten Eingabetyp formatieren möchten, können Sie Attributselektoren verwenden:
input[type=text]- wählt nur Textfelder ausinput[type=password]- wählt nur Passwortfelder ausinput[type=number]- wählt nur Zahlenfelder aus- etc..
Gepolsterte Eingänge
Verwenden Sie die paddingEigenschaft, um Platz innerhalb des Textfelds hinzuzufügen.
Tipp: Wenn Sie viele Eingaben hintereinander haben, möchten Sie vielleicht auch einige hinzufügen margin, um außerhalb davon mehr Platz zu schaffen:
Beispiel
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Beachten Sie, dass wir die box-sizingEigenschaft auf
gesetzt haben border-box. Dadurch wird sichergestellt, dass die Polsterung und eventuelle Ränder in der Gesamtbreite und -höhe der Elemente enthalten sind.
Lesen Sie mehr über die box-sizingEigenschaft in unserem Kapitel CSS Box Sizing .
Umrandete Eingänge
Verwenden Sie die borderEigenschaft, um die Rahmengröße und -farbe zu ändern, und verwenden Sie die border-radiusEigenschaft, um abgerundete Ecken hinzuzufügen:
Beispiel
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Wenn Sie nur einen unteren Rand wünschen, verwenden Sie die border-bottomEigenschaft:
Beispiel
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Farbige Eingänge
Verwenden Sie die background-colorEigenschaft, um der Eingabe eine Hintergrundfarbe hinzuzufügen, und die colorEigenschaft, um die Textfarbe zu ändern:
Beispiel
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Fokussierte Eingaben
Standardmäßig fügen einige Browser eine blaue Umrandung um die Eingabe hinzu, wenn sie fokussiert (angeklickt) wird. Sie können dieses Verhalten entfernen, indem Sie outline: none;zur Eingabe hinzufügen.
Verwenden Sie den :focusSelektor, um etwas mit dem Eingabefeld zu tun, wenn es den Fokus erhält:
Beispiel
input[type=text]:focus
{
background-color: lightblue;
}
Beispiel
input[type=text]:focus
{
border: 3px solid #555;
}
Eingabe mit Symbol/Bild
Wenn Sie ein Symbol in der Eingabe haben möchten, verwenden Sie die background-imageEigenschaft und positionieren Sie es mit der background-positionEigenschaft. Beachten Sie auch, dass wir eine große linke Polsterung hinzufügen, um den Platz des Symbols zu reservieren:
Beispiel
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Animierte Sucheingabe
In diesem Beispiel verwenden wir die CSS transition-Eigenschaft, um die Breite der Sucheingabe zu animieren, wenn sie den Fokus erhält. Mehr über die
transitionEigenschaft erfahren Sie später in unserem Kapitel CSS-Übergänge .
Beispiel
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Textbereiche gestalten
Tipp: Verwenden Sie die resizeEigenschaft, um zu verhindern, dass Textbereiche in der Größe geändert werden (deaktivieren Sie den "Grabber" in der unteren rechten 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;
}
Gestaltung von Auswahlmenüs
Beispiel
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Styling-Eingabetasten
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;
}
/* Tip: use width: 100% for full-width buttons */
Weitere Informationen zum Gestalten von Schaltflächen mit CSS finden Sie in unserem CSS-Schaltflächen-Tutorial .
Responsives Formular
Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen. Wenn der Bildschirm weniger als 600 Pixel breit ist, stapeln Sie die beiden Spalten übereinander statt nebeneinander.
Erweitert: Das folgende Beispiel verwendet Medienabfragen , um ein responsives Formular zu erstellen. Mehr dazu erfahren Sie in einem späteren Kapitel.