de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Wie style HTML5 Range Slider über mehrere Browser

Der Bereich ist einer der neuen Eingabemethoden, die in HTML5 eingeführt wurden. Dieser Eingabetyp ermöglicht die Eingabe einer Zahl innerhalb des angegebenen Bereichs. Die Browser geben diesen Eingabe-Typ nativ als Schieberegler wieder . Es ist eine sehr intuitive Benutzeroberfläche, die wir häufig in einer App finden. Wir können den Griff nach rechts oder links schieben, um die Nummer innerhalb des Bereichs zu erzeugen.

Aber wie Sie oben sehen können, zeigt jeder Browser diesen Eingangstyp in einem etwas anderen Geschmack an, der bei einigen Designern nicht gut sitzt. In diesem Artikel zeigen wir Ihnen, wie Sie es in einer einheitlicheren Form gestalten können . Wenn Sie bereit sind, lassen Sie uns einfach beginnen.

In Chrome, Safari und Opera

Safari und Opera sind Webkit-basierte Browser. Obwohl Chrome sich entschieden hat, seine eigene Engine, Blink, zu übernehmen, sieht es vorerst so aus, dass Chrome immer noch verschiedene Codebasen von Websites geerbt hat.

Webkit bietet eine einfache Möglichkeit, jeden Eingabetyp, einschließlich des range, zu range . Um zu beginnen, können wir die Eingabe mit dem Attributselektor auswählen und die nativen Webkit / Chrome-Stile entfernen, indem Sie -webkit-appearance auf none .

 Eingabe [Typ = Bereich] {-webkit-Darstellung: keine} 

Von dieser Stufe können wir alles hinzufügen, wie zB Rahmen, Hintergrundfarbe, Rundumrandung und so weiter.

 .input [Typ = Bereich] {-webkit-Aussehen: keine; Breite: 100%; Rand-Radius: 8px; Höhe: 7px; Grenze: 1px fest # bdc3c7; Hintergrundfarbe: #fff; } 

Wie Sie unten sehen können, ist die Griffleiste der einzige verbleibende Teil der Eingabe, die nicht von dem obigen Code betroffen ist.

Um Styles darauf anzuwenden, müssen wir das webkit proprietäre Pseudo-Element selector ::-webkit-slider-thumb und ähnlich die nativen Stile mit -webkit-aussehen entfernen.

 input [type = 'range'] :: - webkit-slider-thumb {-webkit-aussehen: keine; Hintergrundfarbe: # ecf0f1; Grenze: 1px fest # bdc3c7; Breite: 20px; Höhe: 20px; Rand-Radius: 10px; Cursor: Zeiger; } 

Und so gestalten wir den Eingabebereich in einem Webkit-Browser. Der oben hinzugefügte Stil sollte in Chrome, Safari sowie der neuesten Version von Opera wirksam werden. Firefox und Internet Explorer würden jedoch nicht davon betroffen sein, da sie unterschiedliche Engines ausführen. Aber wir haben Workarounds für diese beiden.

In Firefox

Das Hinzufügen von Stilen direkt mit der Attributauswahleingabe input[type='range'] würde die nativen Stile der Eingabe in Firefox nicht ändern. Stattdessen müssen wir den proprietären Pseudo-Element-Selektor Firefox ::-moz-range-track und ::-moz-range-thumb .

Die ::-moz-range-track sich auf die Eingangsbereichs-Spur aus, während ::-moz-range-thumb auf die Eingangs- ::-moz-range-thumb .

 .firefox Eingabe [type = Bereich] :: - moz-Bereich-Spur {border-radius: 8px; Höhe: 7px; Grenze: 1px fest # bdc3c7; Hintergrundfarbe: #fff; } .firefox Eingabe [Typ = Bereich] :: - moz-range-thumb {Hintergrund: # ecf0f1; Grenze: 1px fest # bdc3c7; Breite: 20px; Höhe: 20px; Rand-Radius: 10px; Cursor: Zeiger; } 

Wir wenden die exakt gleichen Stile an. Öffnen Sie Firefox, und Sie sollten ein ähnliches Ergebnis wie in den Webkit-Browsern erhalten.

Im Internet Explorer

Der Internet Explorer zeigt den Bereich des Eingabetyps sehr unterschiedlich an. Um es einfacher zu machen, habe ich hier ein Diagramm gezeichnet, das die Teile zeigt, die die Eingabe bilden.

Der IE zeigt auch einen Tooltip, der die Nummer anzeigt, die Sie sind, während wir durch die Griffleiste gleiten.

Jeder dieser Input-Parts kann mit dem IE proprietären Pseudo-Element ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks und ::-ms-tooltip . Hier werden wir auch die gleichen Stile wie in Webkit und Firefox anwenden.

 Eingabe [Typ = "Bereich"] :: - ms-fill-lower, Eingabe [Typ = "Bereich"] :: - ms-fill-obe {Hintergrund: transparent; } input [type = "range"] :: - ms-track {border-radius: 8px; Höhe: 7px; Grenze: 1px fest # bdc3c7; Hintergrundfarbe: #fff; } input [type = "range"] :: - ms-thumb {background-color: # ecf0f1; Grenze: 1px fest # bdc3c7; Breite: 20px; Höhe: 20px; Rand-Radius: 10px; Cursor: Zeiger; } 

Aber die Ausgabe ist nicht etwas, das wir erwartet haben. Die Teilstriche sind sichtbar, während der obere und der untere Teil der Griffleiste ausgeblendet sind.

Wir können die Markierungen leicht entfernen, indem wir step="any" zum Eingabeelement hinzufügen. Es ist jedoch nicht möglich, die Griffleiste vollständig sichtbar zu machen. Es ist so, als hätte das Eingabeelement den overflow auf hidden, aber es kann nicht einfach rückgängig gemacht werden, indem der overflow auf visible . Das ist etwas, was ich immer noch versuche herauszufinden. Wenn Sie dieses Problem gelöst haben, können Sie es im Kommentarfeld unten teilen.

Letzter Gedanke

Der Eingabebereich ist ziemlich anpassbar. Leider hat jeder Browser seinen eigenen Weg und daher müssen wir längere Codes schreiben als erwartet. Ich hoffe, dass es einen Standard geben wird, der diese Angelegenheit in Zukunft regeln kann. Zuletzt, hier ist der Link, um den Eingabebereich zu sehen, den wir Ihnen in diesem Artikel gezeigt haben.

  • Demo anzeigen
  • Quelle herunterladen

"Überstrapazierte" Schriften: Wann sollten Sie sich von einer Schrift verabschieden?

"Überstrapazierte" Schriften: Wann sollten Sie sich von einer Schrift verabschieden?

Je nach Ihrer persönlichen Meinung ist Helvetica entweder eine klassische, wahrhaft neutrale englische Schrift mit universeller Anziehungskraft und Funktionalität - oder es ist eine überstrapazierte, fade Schrift mit einem eigenen kulturellen und historischen Gepäck, das sich beeilen und schon sterben muss. Di

(Tech- und Design-Tipps)

20 Wireframe Designs für einen minimalistischen Lebensstil

20 Wireframe Designs für einen minimalistischen Lebensstil

Wenn Sie sich nicht sicher sind, welche wireframe-Produkte Sie haben, stellen Sie sich eine normale Box mit einem speziellen Design vor: Sie erhalten nur die Rahmen, keine Seiten, Ober- oder Unterseite. Die gebräuchlichsten Drahtgitterprodukte, die Sie vielleicht kennen, sind Geschirrtrockner, Kleiderständer oder Lampenschirme, aber heutzutage gibt es mehr Produkte, die den minimalistischen Ansatz für das Design übernehmen.Die

(Tech- und Design-Tipps)