reines CSS erstellt coole Sliders: Kein JavaScript erforderlich, beide Barrierefreiheit

Dieser Artikel zeigt, wie benutzerdefinierte Bereichs -Sliders nur CSS und native HTML -Elemente erstellen, ohne sich auf JavaScript zu verlassen und gleichzeitig die Zug?nglichkeit zu gew?hrleisten. Tutorials decken M?glichkeiten zum Anpassen von Eingabelementen ab, einschlie?lich des Zurücksetzens und Deaktivierens von Browser -Standardstilen, das Einstellen von Schieberegleitern und das Erstellen von Gleitgradienteneffekten mithilfe von <input type="range">. Darüber hinaus wird erl?utert, wie subtile Animationen hinzugefügt werden, um die Benutzerinteraktion zu verbessern, z. Diese Technologie beh?lt native Funktionen bei und unterstützt die Tastaturnavigation und bietet eine vielseitige und einfach zug?ngliche L?sung für benutzerdefinierte Reichweite. border-image

Schlüsselpunkte:

Erstellen Sie mit reinem CSS und nativem HTML -Elementen einen benutzerdefinierten SCOPE -Schieberegler.
• Das Tutorial <input type="range"> enth?lt Schritte zum Anpassen von Eingabelementen: BREABEN UND DESSALTIGEN BROWERER -Standardstile, Setzen Sie die Schieberegelstile und erstellen Sie mit
.
• border-image Fügen Sie subtile Animationen hinzu, um das Benutzererlebnis zu verbessern, z. B. das ?ndern der Schiebereglastform beim Klicken und das ?ndern der Farbe, wenn Sie schwebten.
• Behalten Sie die native Funktionalit?t und unterstützen Sie die Tastaturnavigation, um die Zug?nglichkeit zu gew?hrleisten.
Der Standard -Slider -Stil ist nicht sch?n. Die folgende Abbildung zeigt den Anzeigeeffekt des Standardbereichs Slider in Chrom-, Firefox- und Safari -Browsern:

Elemente sind jedoch schwer zu stylen. Die meisten Online -L?sungen basieren auf JavaScript und ausführlichem Code. Schlimmer noch, einige Technologien k?nnen auch die Zug?nglichkeit von Elementen zerst?ren. Lassen Sie uns also sehen, wie Sie reine CSS besser nutzen k?nnen, um die Zug?nglichkeit zu beeinflussen. Die folgende CodePen -Demonstration zeigt, was wir erstellen werden:

CodePen Link <input type="range">

Struktur des Bereichs Eingangselement

analysieren wir zuerst die Struktur des Bereichseingangselements. Es ist ein natives Element und jeder Browser hat seine eigene Implementierung. Es gibt zwei Hauptimplementierungen: eine für Webkit- und Blink -Browser (wie Chrome, Edge, Safari und Opera):

<input type="range" min="0" max="100" step="1" value="20">

ein anderer für Firefox:

<input type="range" min="0" max="100" step="1" value="20">

IE hat auch eine dritte Implementierung, aber zum Glück ist dieser Browser jetzt fast weg! Diese Inkonsistenz zwischen Browsern erschwert die Aufgaben, da wir für jede Implementierung unterschiedliche Stile bereitstellen müssen. Ich werde nicht ausführlich darauf eingehen, da dieser Beitrag niemals fertig sein wird, aber ich empfehle dringend, diesen Beitrag von Ana Tudor für eine eingehendere Erkundung zu lesen (Post-Links sollten hier eingefügt werden). Sie müssen sich nur daran erinnern, dass der "Slider" (Daumen), unabh?ngig von der Implementierung, immer eine gemeinsame Komponente ist.

Ich werde dieses Element nur stylen, wodurch mein benutzerdefinierter SCOPE -Schieberegler einfach anpassen kann. Lassen Sie uns direkt in den Code springen und sehen, was erstaunlich ist.

benutzerdefiniertes Eingangselement

Der erste Schritt besteht darin, appearance: none und einige andere gemeinsame Eigenschaften zum Zurücksetzen und Deaktivieren aller Browser -Standardstile zu verwenden:

<input type="range" min="0" max="100" step="1" value="20">

In komplexeren F?llen müssen wir m?glicherweise mehr Code hinzufügen, wenn andere Standardstile auf unsere Elemente angewendet werden. Stellen Sie einfach sicher, dass wir ein "nacktes" Element ohne visuellen Stil haben. Definieren wir auch einige CSS

<input type="range" min="0" max="100" step="1" value="20">

In diesem Schritt sind nur der Schieberegler und sein Standardstil sichtbar.

Stellen Sie den Slider -Element -Stil fest

, lass uns das Slider -Element stylen. Wir beginnen mit den grundlegenden Einstellungen:

input {
  appearance: none;
  background: none;
  cursor: pointer;
}

Verwenden Sie einige magische Effekte border-image hinzufügen

Jetzt werden wir einen magischen CSS -Trick verwenden, um unseren Schieberegler zu vervollst?ndigen. Es beinhaltet die Verwendung von

: border-image

input {
  --c: orange; /* 活動(dòng)顏色 */
  --g: 8px; /* 間隙 */
  --l: 5px; /* 線粗細(xì) */
  --s: 30px; /* 滑塊大小 */

  width: 400px; /* 輸入寬度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}

Die Halluzination ist perfekt durch Hinzufügen

zum Eingabeelement und die Verwendung gr??erer Werte. overflow: hidden

Fügen Sie einige Animationen hinzu

K?nnen wir einige subtile Animationen hinzufügen, wenn wir mit dem Schieberegler interagieren? Es erfordert nicht viel Code und verbessert den UX des Schiebereglers. Zun?chst konvertieren wir den Schieberegler aus einem Randkreis in einen vollst?ndigen Kreis, wenn wir klicken. Dazu fügen wir den

-Wert von box-shadow hinzu. spread

Schlussfolgerung

Wir haben es getan und müssen uns nicht mit komplexen Browser-Implementierungen befassen! Wir haben den Selektor für das Slider -Element identifiziert und einige CSS -Tricks verwendet, um den gesamten Bereich der Schieberegler zu stylen. Vergessen Sie nicht, wir verwenden nur das

Element, daher müssen wir uns keine Sorgen um Barrierefreiheitsprobleme machen, da wir die nativen Funktionen aufbewahren. Der Schieberegler unterstützt die Tastaturnavigation ohne Probleme. Hier sind weitere Beispiele für Schieberegler, die mit derselben Technik erstellt wurden: <input type="range"> CodePen Link

codePen Link

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen benutzerdefinierten Bereichsschieberegler mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!