Camping_RIDER: Frage zu box-sizing

problematische Seite

Aloha ;)

Ich bin gerade darüber gestolpert, dass das select-Element im Standardstil der Browser (zumindest in Chrome und Firefox) einen ungewöhnlichen box-sizing-Wert hat - nämlich die border-box, während andere Elemente, z.B. input, content-box voreingestellt haben. So schreiben wir auch im Wiki:

content-box, Standardwert, Angabe gilt nur für den Inhalt

Zur Verdeutlichung der Problematik mein kleiner Test bei codepen, über den ich erst darauf gestoßen bin.

Dass also select offenbar eine andere Standardformatierung bezüglich box-sizing hat, sollte im Wiki unbedingt erwähnt werden, so viel ist klar. Die Frage ist aber: welche weiteren Elemente außer select betrifft das noch?

Grüße,

RIDER

--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  1. Lieber Camping_RIDER,

    das visuelle Gestalten von Eingabeelementen wie <input> und <select> war schon immer eine hakelige Angelegenheit. Oft spielen Systemeigenschaften der jeweiligen Plattform eine Rolle, wie etwas dargestellt wird - und da wundert mich Deine Entdeckung nicht im Mindesten.

    Liebe Grüße,

    Felix Riesterer.

    1. Aloha ;)

      das visuelle Gestalten von Eingabeelementen wie <input> und <select> war schon immer eine hakelige Angelegenheit. Oft spielen Systemeigenschaften der jeweiligen Plattform eine Rolle, wie etwas dargestellt wird - und da wundert mich Deine Entdeckung nicht im Mindesten.

      Naja, das war früher mal. Heutzutage sollte man schon in der Lage sein, auch Formularelemente genau zu formatieren; dazu hat ja gerade die erwähnte Eigenschaft box-sizing sowie die Angabe von Werten mittels calc() beigetragen.

      Der gefundene Effekt fällt ja auch nicht vom Himmel, sondern lässt sich direkt auf das box-sizing im Standard-Style des Browsers zurückführen.

      Es sollte heutzutage also schon möglich sein, aufzulisten, welches Element sich wie verhält (im Gegensatz zu früher, wo man manchmal schon ein gewisses Gottvertrauen in das Betriebssystem und den Browser mitbringen musste).

      @Edit: Ich habe das Codepen-Beispiel mal noch ein wenig erweitert um klar zu machen, dass der Effekt keineswegs random ist, sondern tatsächlich nur vom box-sizing abhängt.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
      1. Hej Camping_RIDER,

        @Edit: Ich habe das Codepen-Beispiel mal noch ein wenig erweitert um klar zu machen, dass der Effekt keineswegs random ist, sondern tatsächlich nur vom box-sizing abhängt.

        Hast du schon mehrere Browser getestet? Welche? - Soll ich noch Tests beisteuern?

        Marc

        1. Aloha ;)

          @Edit: Ich habe das Codepen-Beispiel mal noch ein wenig erweitert um klar zu machen, dass der Effekt keineswegs random ist, sondern tatsächlich nur vom box-sizing abhängt.

          Hast du schon mehrere Browser getestet? Welche? - Soll ich noch Tests beisteuern?

          Chrome und Firefox unter Windows 7 zeigen das gleiche Verhalten. Der IE11 auch. Mit Safari kann ich nicht dienen.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
          1. Hej Camping_RIDER,

            Chrome und Firefox unter Windows 7 zeigen das gleiche Verhalten. Der IE11 auch. Mit Safari kann ich nicht dienen.

            Im aktuellen Safari sind die Select-Boxen der Beispiele 2 und 4 so breit wie die darunter leigende textarea - alle anderen Selectboxen sind schmaler als die darunter liegenden textareas...

            Marc

            1. Aloha ;)

              Chrome und Firefox unter Windows 7 zeigen das gleiche Verhalten. Der IE11 auch. Mit Safari kann ich nicht dienen.

              Im aktuellen Safari sind die Select-Boxen der Beispiele 2 und 4 so breit wie die darunter leigende textarea - alle anderen Selectboxen sind schmaler als die darunter liegenden textareas...

              Tatsächlich? Auch die dritte? Ich war eigtl. davon ausgegangen, dass das zweite und dritte Beispiel überall und in jedem Fall gleich große Boxen aufweist, weil ich beidesmal allen beiden Elementen eine border-box explizit zuweise... Das ist dann tatsächlich ein Verhalten, was eher unter die von @Felix Riesterer genannte Kategorie fällt...

              Grüße,

              RIDER

              P.S.: Chrome, Firefox und IE zeigen nur im ersten Beispiel, also im default-Fall, unterschiedliche Größen...

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
              1. Hej Camping_RIDER,

                Im aktuellen Safari sind die Select-Boxen der Beispiele 2 und 4 so breit wie die darunter leigende textarea - alle anderen Selectboxen sind schmaler als die darunter liegenden textareas...

                Tatsächlich? Auch die dritte?

                Yep.

                Screenshot Safari unter OS X "El Capitan"

                Marc

                1. Aloha ;)

                  Tatsächlich? Auch die dritte?

                  Yep.

                  Okay - "sicher" soweit man das so sagen kann, ist man also nur mit border-box, weil Safari offensichtlich ein anderes Verständnis davon hat, was genau die content-box umschließt.

                  Meint ihr die Ergebnisse dieses Tests sind ausreichend, um im Artikel zum box-sizing die Empfehlung auszusprechen, Formularelemente mittels border-box zu stylen?

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                  1. Hej Camping_RIDER,

                    Meint ihr die Ergebnisse dieses Tests sind ausreichend, um im Artikel zum box-sizing die Empfehlung auszusprechen, Formularelemente mittels border-box zu stylen?

                    Hier noch der aktuelle Safari von iOS 9:

                    Bildbeschreibung

                    Marc