Benutzerdefinierte Cross-Browser-kompatible Range Inputs mit CSS
Kommentare

Slider kommen an vielen Stellen zum Einsatz, allerdings ließ sich ihr Aussehen meist nicht auf einfachem Wege nur mit CSS anpassen. Stattdessen wurde ein Mix aus Standard-Selektoren und -Properties und

Slider kommen an vielen Stellen zum Einsatz, allerdings ließ sich ihr Aussehen meist nicht auf einfachem Wege nur mit CSS anpassen. Stattdessen wurde ein Mix aus Standard-Selektoren und –Properties und prefixed Selektoren und Properties benötigt. Seit der Veröffentlichung von Internet Explorer 10 ist es möglich, Cross-Browser-kompatible Slider nur mit CSS zu generieren. Daniel Stern erklärt, wie Range-Inputs ein benutzerdefinierter Stil verpasst werden kann.

Aussehen von Slidern individuell anpassen

Um das Aussehen von Slidern mit benutzerdefinierten CSS-Styles zu überschreiben, müssen verschiedene Styles auf Range Inputs in allen Browsern angewandt werden, sodass sie als unsichtbare oder ungestylte Range-Inputs vorliegen. Anschließend kann das Aussehen der Slider individuell mit HTML angepasst werden.

So werden zunächst Thumb und Track einzeln wie normale HTML-Elemente angepasst, dann werden beide CSS miteinander kombiniert, um den vollständigen Range-Input zu erstellen. Noch einfacher und vor allem effizienter ist die Nutzung eines Preprozessors, um identische Range-Inputs für jeden Browser zu gestalten.

In seinem Tutorial zur Anpassung von Cross-Browser-kompatiblen Slidern gibt Daniel Stern zudem einige Code-Beispiele, die den Vorgang verdeutlichen. In jedem Fall ist es ein nützliches Tool, um das Aussehen von Range-Inputs mit einfachen Mitteln zu verändern.

Aufmacherbild: Web User Interface Set – Sliders. Colored elements von Shutterstock / Urheberrecht: LittleCuckoo

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -