 Formularelemente formatieren
Eingabefelder und Textboxen in Formularen sollen in den verschiedenen Browsern möglichst gleich aussehen. Besonders die Breiten exakt darzustellen ist manchmal nicht so einfach. Da helfen CSS-Formatangaben.
Ansicht ohne CSS-Formatierung
Hier sehen sie ein Demo-Formular ohne spezifische CSS-Formatierungen. Vom Browser werden zwar die für diese Webseite allgemeingültigen CSS-Anweisungen wie Schriftformatierungen und Farben berücksichtigt, die Formularelemente selbst können aber von Browser zu Browser unterschiedlich dargestellt werden. Im Internet-Explorer wird eine Formatierung des Scrollbars der Seite für die Textarea übernommen.
Gestaltung der Formulafelder mittels CSS - Demo 01
Nun sollen für die Formularelemente eigene Formatierunen festgelegt werden. Einheitliche Breitenangaben für Eingabefelder (Input und Textarea) sorgen für eine optisch bessere Darstellung. Außerdem werden Rand- und Textformatierung, Hintergrundfarben sowie Innenabstände festgelegt.
Gestaltung der Formulafelder mittels CSS - Demo 02
Eine optische Verbreiterung der Eingabefelder wird mit der Randformatierung 3 Pixel Weiß erreicht. Diese Angabe ist nicht ohne Tücken.
 Im FF kann das die Textinhalte (unten) abschneiden, weil der 3 px breite Rand von der Höhe der Textfelder subtrahiert wird. Der IE wird den Rand zur Elementhöhe hinzu addieren!
Abhilfe schafft eine Angabe zur Zeilenhöhe mit 'line-height' (hier nicht eingesetzt).
Gestaltung der Formulafelder mittels CSS - Demo 03
CSS-Anweisungen
im Head:
<style type="text/css">
<!--
/* Demo-Formular 01 */
.radio01 {
color:#2C6ED5;
font-size:12px;
border: none;
padding:2px;
}
.check01 {
color:#2C6ED5;
font-size:12px;
border: none;
padding:2px;
}
.text01 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding:5px;
width:320px;
height:24px;
}
.area01 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding:5px;
width:320px;
height:100px;
}
/* Demo-Formular 02 */
.radio02 {
color:#2C6ED5;
font-size:12px;
border: none;
padding:2px;
}
.check02 {
color:#2C6ED5;
font-size:12px;
border: none;
padding:2px;
}
.text02 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 3px solid #FFFFFF;
background-color: #FFFFFF;
padding:5px;
width:320px;
height:24px;
}
.area02 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 3px solid #FFFFFF;
background-color: #FFFFFF;
padding:5px;
width:320px;
height:100px;
}
/* Demo-Formular 03 */
.radio03 {
color:#2C6ED5;
font-size:12px;
border: none;
padding:2px;
}
.check03 {
color:#2C6ED5;
font-size:12px;
border: none;
padding:2px;
}
.text03 {
color:#7C43B6;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #C7AEE1;
background-color: #FFF7FB;
padding:5px;
width:320px;
height:24px;
}
.area03 {
color:#7C43B6;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #C7AEE1;
background-color: #FFF7FB;
padding:5px;
width:320px;
height:100px;
}
-->
</style>
im Formular (Auszug):
<input class="text01" type="text" ...
<textarea class="area01" name="textbox" ...
<input class="radio01" type="radio" name="r1" ...
<input class="check01" type="checkbox" name="c1" ...
|
WWW.WEB-TOOLBOX.NET
QuellCode Demo 01
ZURÜCK