Mit CSS können Sie das Erscheinungsbild von Formularfeldern anpassen, einschließlich Textfeldern, Auswahlfeldern, Kontrollkästchen und Radio-Buttons. Hier sind einige Anweisungen, wie Sie das tun können:
Grundlegende Textfeld-Styles:
```css
input[type=“text”] {
font-size: 16px;
color: #000;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}
```
Bei diesem Code wird die Schriftgröße auf 16 Pixel gesetzt, die Textfarbe auf Schwarz, die Hintergrundfarbe auf Weiß und die Ränder auf eine einpixelige feste Linie in hellgrau. Das Padding auf 5 Pixel eingestellt.
Styling eines Auswahl Feld:
```css
select {
font-size: 16px;
color: #000;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}
```
Bei diesem Code wird das Auswahlfeld ähnlich wie das Textfeld gestylt.
Styling von Checkboxen und Radio Buttons ist ein wenig komplizierter und oft wird dazu JavaScript oder eine Bibliothek wie jQuery verwendet, da die Standard-HTML-Checkboxen und Radio-Buttons nur begrenzte Anpassungen erlauben.
Sie können jedoch auch das Aussehen der Kontrollkästchen und Radiotasten ändern, indem Sie benutzerdefinierte Bilder oder Symbole mit Pseudo-Elementen verwenden:
```css
input[type=“checkbox”] {
display: none;
}
input[type=“checkbox”] + label {
padding-left: 25px;
cursor: pointer;
}
input[type=“checkbox”] + label:before {
content: “”;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: #ccc;
border: 1px solid #000;
}
```
In diesem Beispiel verwenden wir das `:before` Pseudoelement, um ein neues Quadrat zu erstellen, das wie ein Kontrollkästchen aussieht. Das tatsächliche Kontrollkästchen ist ausgeblendet.
Diese sind nur grundlegende Beispiele und Sie können viele andere Eigenschaften ändern, wie z.B. Schriftart, Schatten, Fokus-Glow usw. Darüber hinaus können Sie auch CSS3 verwenden, um einige fortgeschrittene Stile hinzuzufügen, wie z.B. abgerundete Ecken, Farbverläufe und Übergänge.
