Formulafeld formatieren 01
    
 Home • CSS • Formularfeld <input>

 Eingabefelder formatieren 01

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 hilft CSS.
<input>-Feld formatieren


Ansicht ohne CSS-Formatierung

Name: 
Ansicht mit CSS-Formatierung

Name: 



   Gestaltung von Formularfeldern mittels CSS

Beispiele für Formatierungen von Input-Elementen

Die Notierungen der CSS-Anweisungen habe ich gleich unterhalb der Demos platziert. Die Anweisungen können Sie als Inline-Anweisung oder über CSS-Unterklassen zuweisen. Eine Demo dazu finden Sie weiter unten auf dieser Seite.

Vorsicht mit einer Randformatierung von mehr als einem Pixel Breite! Diese Angabe ist nicht ohne Tücken. Abhilfe schafft eine Angabe zur Zeilenhöhe mit 'line-height'.

Das demonstrierte ich bereits auf der Seite 3 Demos.

Im FF kann das die Textinhalte der Felder abschneiden, weil der Rand von der zur Verfügung stehenden Höhe subtrahiert wird. Der IE wird den Rand zur Elementhöhe hinzu addieren (den Rand außen anordnen).





   eigene CSS-Klassen für Textfelder

Sie erinnern sich: CSS-Anweisungen für ein bestimmtes HTML-Tag (einen bestimmten Selektor) werden in Anweisungsblöcken zusammengefasst. In diesem Block stehen dann die Anweisungen, die für dieses HTML-Tag gelten. Bei eigenen Klassen tragen Sie kein HTML-Tag ein und bestimmen den Namen des Selektors selbst, stellen dem Namen aber unbedingt einen Punkt voran!


input
{
hier steht der Code, gültig für alle <input>-Elemente
}

.eingabe01
{
hier steht der Code, gültig für die Unterklasse .eingabe01
}
Wenn Sie eigene Klassen (auch mehrere) festlegen, haben sie die Möglichkeit Input-Elemente innerhalb eines Formulars unterschiedlich darzustellen. Das ist immer dann von Vorteil, wenn einzelne Eingabefelder hervorgehoben werden sollen (z.B. Pflichtfelder) oder unterschiedlich lang sein sollen.


Beispiel 01

font-family:Arial,sans-serif;
color:#000000;
font-size:12px;
border: 1px solid #008030;
background-color:#F4FFF4;
height:22px;
width:250px;
padding:3px;

Beispiel 02

font-family:Arial,sans-serif;
color:#8F8F8F;
font-size:12px;
font-weight:bold;
border:none;
border-bottom: 1px dotted #008030;
height:22px;
width:250px;
padding:3px;

Beispiel 03

font-family:Arial,sans-serif;
color:#BF0000;
font-size:12px;
border: 1px solid #E06060;
background-color:#FFFFFF;
height:22px;
width:250px;
padding:3px;

Beispiel 04

font-family:Arial,sans-serif;
#000000;
font-size:12px;
border: 1px solid #EED5FF;
background-color:#FFF0FF;
height:22px;
width:250px;
padding:3px;

Beispiel 05

font-family:Arial,sans-serif;
color:#0050A0;
font-size:12px;
border:none;
border-top: 1px solid #0050A0;
border-bottom: 1px solid #0050A0;
background-color:#FFFFFF;
height:22px;
width:250px;
padding:3px;

Beispiel 06

font-family:Arial,sans-serif;
color:#0050A0;
font-size:12px;
border:none;
border-top: 1px dotted #0050A0;
border-bottom: 1px dotted #0050A0;
background-color:#FFFFFF;
height:22px;
width:250px;
padding:3px;

Beispiel 07

font-family:Arial,sans-serif;
color:#FFFFFF;
font-size:12px;
border: 3px double #AFAFAF;
background-color: #5F5F5F;
padding:3px;
height:26px;
width:250px;

Beispiel 08

font-family:Arial,sans-serif;
color:#FFFFFF;
font-size:12px;
border:none;
background-color: #BF0000;
height:22px;
width:250px;
padding:3px;



  Inline oder global



1  mit Inline-Angaben:

Inline-Formatierungen direkt im <input>-Tag sind eine Alternative zur globalen Anweisungen und werden in der Regel für eine einzelne Anweisung genutzt.

Aufgabenstellung:

Für eine Code-Eingabe soll ein einzelnes <input>-Element zur besseren Hervorhebung unterschiedlich formatiert werden. Es wird ein Eingabefeld für 3 Zeichen benötigt.

<input style="border:1px solid #DF0000;color:#000000;width:30px;" ...
Bitte den Code 'abc' wiederholen:  



2  mit globalen CSS-Angaben:

CSS-Anweisungen im Head-Bereich der Seite oder in einer externen CSS-Datei festlegen. Formatierungen können Sie generell für alle <input>-Elemente mit gleichen Eigenschaften festlegen oder zur besseren Differenzierung mehrere unterschiedliche Unterklassen notieren.

Aufgabenstellung:

Für eine Datumseingabe sollen <input>-Elemente unterschiedlich formatiert werden. Es werden Eingabefelder für 2 und 4 Zeichen benötigt.

Im HEAD-Bereich werden die CSS-Anweisungen festgelegt. Im BODY-Bereich erhalten die entsprechenden HTML-Tags das Attribut 'class'. Als Wert wird der Bezeichner / Name der Unterklasse eingetragen.

CSS-Angaben im Head: 
<style type="text/css">
<!--

.datum2
{
font-family: Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #EED5FF;
background-color: #FFF7FB;
width:30px;
text-align:center;
}

.datum4
{
font-family: Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #EED5FF;
background-color: #FFF7FB;
width:50px;
text-align:center;
}

-->
</style>
im Body für die Einträge Tag / Monat / Jahr:

<input class="datum2" type="text" value="TT" ...
<input class="datum2" type="text" value="MM" ...
<input class="datum4" type="text" value="JJJJ" ...
Ergebnis :

Datum eintragen:  





30.05.2003   
NACH OBEN