Ich habe für die Gestaltung der Felder jeweils eine Klasse angelegt, so kann man seine Felder auch unterschiedlich gestalten.
Die folgenden Vorlagen sind nur ein kleiner Auszug. CSS bietet sehr viele Möglichkeiten Formularfelder zu gestalten, Ihr könnt Farben, Rahmen, Rahmenstärken, Hintergrundbilder usw. variieren.
Mit CSS gibt es fast keine Grenzen.
Navigation:
Gestalten mit unterschiedlichen Rahmen | Verschiedene Hintergrundfarben | Eingabefelder mit Hover-Effekt | Andere Schriftarten definieren
Eingabefelder mit Hintergrundbild | Textarea-Feld gestalten | Buttons gestalten
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
Gestalten mit unterschiedlichen Rahmen
Einfacher Rahmen
.cssdesign{
border: 1px solid #666666;
}
2 Pixel starker Rahmen
.cssdesign{
border: 2px solid #0066FF;
}
Gepunkteter Rahmen
.cssdesign{
border: 1px dotted #666666;
}
Rahmen Outset
.cssdesign{
border: 1px outset #666666;
}
Gepunkteter Linie
.cssdesign{
border-bottom: 1px dotted #666666;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
Eingabefeld oben offen
.cssdesign{
border-bottom: 1px solid #666666;
border-top: 0px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
}
Verschiedene Hintergrundfarben
nach oben
Einfacher Rahmen mit Hintergrundfarbe
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 1px solid #666666;
background-color: #FFFFCC;
}
Gepunkteter Rahmen mit Hintergrundfarbe
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 1px dotted #666666;
background-color: #FFFFCC;
}
Starker Rahmen mit Hintergrundfarbe
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 2px solid #FF0000;
background-color: #FFFFCC;
}
Rosa Eingabefeld ohne Rahmen
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 0px;
background-color: #FFCCFF;
}
Graues Eingabefeld ohne Rahmen
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 0px;
background-color: #CCCCCC;
}
Orangenes Eingabefeld ohne Rahmen
Starke linke Kante
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border-left: 10px solid #666666;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
background-color: #FFCC00;
color: #666;
}
Eingabefelder mit Hover-Effekt
nach oben
Eingabefeld mit Hover-Effekt
Eingabefeld färbt sich beim Überfahren mit der Maus.
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 1px solid #000;
}
.cssdesign:hover{
background-color: #FFFFCC;
}
Eingabefeld mit Hover-Effekt
Eingabefeld färbt sich und ändert Rahmen beim Überfahren mit der Maus.
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
border: 1px solid #000;
}
.cssdesign:hover{
background-color: #FFFFCC;
}
Andere Schriftarten definieren
nach oben
Schriften definieren
Im Eingabefeld wird eine Courier verwendet.Des Weiteren wurde die Höhe des Feldes geändert.
Der Text im Eingabefeld wird eingerückt (padding).
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
height: 20px;
padding-top: 5px;
padding-left: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
border: 1px solid #000;
background-color: #FFFFCC;
}
Eingabefelder mit Hintergrundbild
nach oben
Über CSS können den Rahmen auch Bilder zugeordnet werden.
Hintergrundbild einbinden
Das Hintergrundbild (ein Verlauf) hat die Maße 15x30 Pixel.
HTML-Code: <input size="30" class="cssdesign" />
CSS-Klasse:
.cssdesign{
background-image: url(input_bg.jpg);
background-repeat: repeat-x;
height: 25px;
border: 0px;
color: #fff;
padding: 7px 0px 0px 10px;
}
HTML-Code: <textarea rows="6" cols="40" class="cssdesign"></textarea>
CSS-Klasse:
Textarea-Feld gestalten
Das Funktioniert genau wie bei den Input-Feldern.Formatiertes Textarea-Feld
.cssdesign{
border: 1px solid #000;
background-color: #FFFFCC;
}
HTML-Code:
CSS-Klasse:
Buttons gestalten
Formatierter Button
<input type="submit" name="abschicken" class="cssdesign" value="Senden" />
.cssdesign{
height: 30px;
width: 100px;
border: 0px;
background-color: #000000;
color: #fff;
}
Wer Fehler findet, darf sie behalten oder mir mitteilen.