Schieberegler im Firefox

[JürgenB]

Hallo,

ich habe mich in den letzten Tagen mit Schiebereglern (<input type="range">) beschäftigt. Dabei habe ich mich gewundert, dass diese im aktuellen Windows-Firefox in meinen beiden Testseiten unterschiedlich aussahen, obwohl ich HTML und CSS von der einen in die andere Seite kopiert habe.

Ursache war, dass bei einer der Seiten eine übergeordnete CSS-Anweisung allen Input-Elementen eine Hintergrundfarbe gibt. Dieses hat zur Folge, dass sich das Aussehen des Schiebereglers drastisch verändert.

Wer will, kann ja im Frickl auf der „Problematischen Seite“ mal dem Input eine Hintergrundfarbe geben, z.B. background-color: transparent;.

Gruß
Jürgen

[Auge]

Hallo

ich habe mich in den letzten Tagen mit Schiebereglern (<input type="range">) beschäftigt. Dabei habe ich mich gewundert, dass diese im aktuellen Windows-Firefox in meinen beiden Testseiten unterschiedlich aussahen, obwohl ich HTML und CSS von der einen in die andere Seite kopiert habe.

Ursache war, dass bei einer der Seiten eine übergeordnete CSS-Anweisung allen Input-Elementen eine Hintergrundfarbe gibt. Dieses hat zur Folge, dass sich das Aussehen des Schiebereglers drastisch verändert.

Wer will, kann ja im Frickl auf der „Problematischen Seite“ mal dem Input eine Hintergrundfarbe geben, z.B. background-color: transparent;.

Na das ist ja neckisch. Nicht nur, dass es die Hintergrundfrabe an sich gibt, sondern auch, dass der Schieber seine Form und Farbe ändert.

Tschö, Auge

[Gunnar Bittersmann]

@@JürgenB

Wer will, kann ja…mal dem Input eine Hintergrundfarbe geben, z.B. background-color: transparent;.

Interessant, dass sich das Aussehen selbst dann ändert, wenn man den Defaultwert verwendet.

Und auch, dass der Fokus dann nicht durch blauen Schatten am Knopf, sondern gepunkteten Rahmen um den ganzen Regler dargestellt wird:

vs.

Wenn man den Regler stylen will, müsste man an die Elemente im Shadow-DOM ran. Was man bei Safari und Chrome sowieso müsste, da sie die Angabe einer Hintergrundfarbe fürs input[type="range"]-Element völlig unbeeindruckt lässt.

LLAP 🖖

[Matthias Apsel]

Hallo JürgenB,

Ursache war, dass bei einer der Seiten eine übergeordnete CSS-Anweisung allen Input-Elementen eine Hintergrundfarbe gibt. Dieses hat zur Folge, dass sich das Aussehen des Schiebereglers drastisch verändert.

Früher stands mal im Wiki:

Sobald Sie beispielsweise Hintergrund- oder Rahmeneigenschaften ändern, werden sämtliche Gestaltungen, die durch Browser und Betriebssystem vorgegeben sind, durch die CSS-Voreinstellungen ersetzt.

Die Tatsache, dass Buttons ihre browserspezifische Gestaltung verlieren, sobald Sie bestimmte CSS-Eigenschaften ändern, ist kein Fehler sondern gewolltes Verhalten. So wird versucht sicherzustellen, dass die gewünschte Gestaltung nicht mit dem Browserdesign kollidiert.

Und bestimmt ist dieses Verhalten auch irgendwo genau so spezifiziert.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

ich habe das aber nur im Windows-FF beobachtet. Auch der Mac-FF macht das nicht. Da sind die Schieber immer rund.

Gruß
Jürgen

[Auge]

Hallo

ich habe das aber nur im Windows-FF beobachtet. Auch der Mac-FF macht das nicht. Da sind die Schieber immer rund.

Im Firefox unter Linux auch. Allerdings hat der runde Schieber eine Textur wie ein Drehknopf mit Aluminiumkappe. Setzt man die Hintergrundfarbe, ist der Schieber uni grau und der Balken ändert sich auch leicht.

Browser-CSS Firefox 56.0.2, Linux, Mate-Desktop

User-CSS (background-color: transparent;), Firefox 56.0.2, Linux, Mate-Desktop

Tschö, Auge

[Gunnar Bittersmann]

@@JürgenB

Mac-FF… Da sind die Schieber immer rund.

Sehen aber anders aus. Die Screenshots in meinem Posting sind vom Firefox unter macOS.

LLAP 🖖