Flexible Eingabefelder

Die einfache Angabe von display: block reicht bei Eingabefeldern nicht aus. Eine Längenangabe ist notwendig. Bei der Verwendung von width: 100% wird der Innenabstand zu der Gesamtbreite hinzuaddiert wodurch das Feld zu lang wird. Deswegen werden für Eingabefelder oft feste, nicht flexible Breiten verwendet. Die Folge von solchen halbherzigen Lösungen ist immer CSS-Chaos und Redundanz. Für flexible Eingabefelder lohnen sich daher einfache Wrapper-Strukturen um dieses Problem in den Griff zu bekommen.

Beispiel


hier klicken

Mit CSS3 kann dies sehr viel einfacher realisiert werden:

.box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
Impressum