WIDTH bei INPUT und SELECT werden unterschiedlich dargestellt

Aus ITwiki
Version vom 12. September 2012, 09:42 Uhr von Flo84 (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „== Problembeschreibung == Tolles Thema: wer versucht, für ein INPUT-Feld dieselbe Breite (WIDTH) wie für ein SELECT-Feld hinzubekommen, wird feststellen, da…“)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Problembeschreibung

Tolles Thema: wer versucht, für ein INPUT-Feld dieselbe Breite (WIDTH) wie für ein SELECT-Feld hinzubekommen, wird feststellen, dass die Breite bei SELECT stets um ein paar Pixel kleiner ausfällt, als beim INPUT.

Lösung

Auf stackoverflow.com habe ich einen Artikel gefunden, der beschreibt, wie dieses Problem zu lösen ist. Definiere im CSS einfach folgendes:

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

Werden diese Werte gesetzt, so passt die WIDTH für INPUT und SELECT genau - sie haben dieselbe Breite.

Nützliche Links