Einheitliche Höhe von Formularelementen

[fietur]

Hallo,

ich stolpere gerade über ein Problemchen, vor dem ich mich schon jahrelang gedrückt habe: ein einheitliches Aussehen von Formularelementen.

Ich habe in einer <form> Eingabefelder <input> und Auswahllisten <select> nebeneinander. Für beide Arten lege ich den gleichen Schriftstil fest (monospace), und dennoch sind die Höhen der beiden Boxen unterschiedlich. Schlimmer noch, im Firefox ist die Box der Liste bei einer Vergrößerung durch den Browser unterhalb etwa 125% kleiner als die des Eingabefeldes, bei stärker Vergrößerung ist es umgekehrt.

An welchem Rädchen müsste ich beim Stil drehen, damit die Ansichten gleich groß werden? Mit einfachem padding oder font-size ist es jedenfalls nicht getan.

Kann man das überhaupt, oder liegt das (immer noch) ausschließlich im Ermessen des Browsers?

[Matthias Apsel]

Hallo fietur,

Kann man das überhaupt, oder liegt das (immer noch) ausschließlich im Ermessen des Browsers?

Bei select tippe ich auf letzters.

Bis demnächst
Matthias

[fietur]

Hallo Matthias,

danke, das dachte ich mir auch, wollte aber nachfragen, falls sich doch jemand mal tief in die Vererbung hineingegraben hat.

Ich habe es inzwischen selbst gelöst, indem ich nach weiteren Attributen geschaut und es mit den Ansichten in Chrome und Edge verglichen habe. Dort ist es weniger stark ausgeprägt, aber auch vorhanden. In Chrome gab es dazu auch noch stärker abgerundete Ecken beim select.

Zunächst habe ich einfach die Umrandung auf Null gesetzt (border:0;), aber das hat nichts gebracht.

Komischerweise war dann eine einfache gleichlautende Neudefinition der Ränder in beiden Elementen erfolgreich; mit border:1px solid grey werden input und select jetzt nicht nur im Firefox, sondern auch in Chrome und Edge gleichhoch angezeigt.

✔️ Wieder ein Mysterium fürs Archiv.

[Rolf B]

Hallo fietur,

wie ein Browser Form-Elemente darstellt, ist zunächst mal ihm überlassen. Sinnvollerweise verwendet er UI-Elemente des jeweiligen Betriebssystems, also ein Edit-Control für input type="text" oder eine Combobox im CBS_DROPDOWN Style für ein Select-Element.

Das sieht dann anders aus wie ein selbstgestyltes input oder select. Selbst wenn ich 1:1 abschreibe, was mir Chrome oder Firefox als user agent stylesheet anzeigen, sieht es doch anders aus. Ich vermute, das liegt daran, dass diese Anzeige lediglich andeuten soll, was das Betriebssystem daraus macht.

Und ein select ist aus irgendeinem Grund ein Pixel höher als ein input. Jedenfalls muss man, wenn man es passend zwingend will, für input ein vertikals Padding-Pixel mehr setzen. Unter Windows jedenfalls. Das kann bei Linux oder Mac oder iOS anders sein.

Das mit dem Zoomen sehe ich auch - das kann unter Windows auch ein Effekt von GDI+ sein (die Grafikbibliothek, mit der man als Windowsprogramm Dinge zeichnet). Diese Lib arbeitet mit Fließkommawerten und rundet die Ausgabe irgendwie auf die physikalischen Pixel. Wenn ich im Fuchs zoome, verschwindet irgendwann der Höhenunterschied zwischen input und select.

Wenn ich mit padding und border nachhelfe, bleiben sie gleich hoch, soweit okay, aber ein select mit Styles sieht im Firefox anders aus als ein select ohne Styles. Es ist wirklich nicht trivial.

Rolf