Formulare, Box Model und CSS3

…oft sind es die kleinen Dinge

Henning über Webdesign

Meist sind es die kleinen Dinge, die beim Erstellen eines Webdesigns die meiste Zeit in Anspruch nehmen. Das kann z.B. auch das Anpassen der Breite zweier Formular-Elemente sein. Eigentlich kein Ding — CSS-Klasse erstellen, Breite setzen, zuweisen und fertig. Aber nicht immer geht es so einfach. Nehmen wir folgendes Szenario:

Kleine Ursache – große Wirkung

Eine Textbox soll 100% ihres Containers einnehmen sowie auch eine darunter eingefügte Dropdownliste.


<div id="container">
   <input type="text" id="longtextbox" class="longformelement" /><br /><br />
   <select id="longdropdown" class="longformelement">
	  <option>Option 1</option> 
	  <option>Option 2</option>
	  <option>Option 3</option>
   </select>
</div>

Die folgenden CSS-Deklarationen werden zugewiesen:


#container {
	 width: 400px;
}
.longformelement {
	 width: 100%; 
}

Das erwartete Ergebnis bleibt leider aus. Die Dropdown-Liste ist ein Stück zu kurz! IE, Firefox, Safari und Chrome zeigen die Selectbox zu kurz an.

Formularelemente - Längenvergleich

Woran liegt das?

Wenn alle Erklärungen scheitern zieht man am besten immer das Box Model heran.

W3C und IE Box Model

Man kann bei Formular-Elementen grundsätzlich zwei Arten von Interpretationen des Box Models unterscheiden:

1. Formularelemente, die dem W3C Box Model folgen und
2. input[text], input[file], textarea
3. Formular-Elemente, die dem traditionellen Box Model folgen
4. input[submit], select, input[checkbox], input[radio]

Die Elemente der ersten Gruppe erhalten ihre Breite nach dem folgenden Schema [1]:

Visuelle Breite = CSS width + 2*padding + 2*border

Das wären bei einem input[text] mit einer CSS-Breite von 100px bei Browser-Default:
100px + 2*4px + 2*1px = 110px bzw. bei einer textarea 100px + 1*4px + 2*2px = 108px. Man sieht also schon hier, dass auch in der ersten Gruppe bereits Unterschiede bestehen. Die textarea hat nur ein padding auf der linken Seite, da der rechte Bereich eine Scrollbar vorsieht und ein padding hier bei manchen Browser zu einer Verschiebung der vertikalen Bildlaufleiste führt. Die Berechnung funktioniert allerdings nur bei absoluten Angaben in Pixeln (beware of IE).

Box Model und Formularelemente

Abhilfe mit CSS3

Eine einfache Möglichkeit, diesem Chaos Einhalt zu gebieten stellt nachfolgendes CSS3-Statement dar:


input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Allen Browsern wird das gleiche Box Model zugewiesen, hier border-box [2] … und schon sieht das Ergebnis gleich schon ein wenig freundlicher aus . Dem CSS3 Basic User Interface Module [3] entsprechend können box-sizing folgende Werte zugewiesen werden:

  • inherit: von Papa/Mama erben (Standardwert)
  • content-box: das „gängige“ Box Model
  • border-box: neues Box Model, Rahmen- und Innenabstände führen nicht mehr zu einer Verbreiterung des Elements

Sowohl in Mozilla, Opera, IE8 und Webkit-Browser unterstützen box-sizing in ihren jeweiligen Dialekten (-moz, etc.). Es wurde die dem CSS3 Basic User Interface Module entsprechende Variante implementiert (Werte siehe oben).

Alle Links zum Nachlesen:

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries