Wie kann ich HTML5-Bereichseingaben mit zwei unterschiedlichen Farben (Grün und Grau) formatieren?

HTML5-Bereichseingaben mit klaren Farben gestalten

Problem:

Um eine optisch ansprechende Bereichseingabe zu erreichen, wo links Seite ist grün und die rechte Seite ist grün grau.

Lösung:

Um diesen Effekt zu erzielen, ist ein browserspezifisches Styling erforderlich. Obwohl reine CSS-Lösungen möglich sind, variieren sie je nach Zielbrowser.

CSS-Lösung für Chrome:

• Überlauf aus Eingabe[Bereich] ausblenden.
• Füllen Sie den vorherigen Bereich des Daumens mit der gewünschten Farbe auf der linken Seite, indem Sie a verwenden Schatten.

CSS-Lösung für IE:

• Verwenden Sie das integrierte Pseudoelement ::-ms-fill-lower, um das festzulegen Farbe auf der linken Seite.

CSS-Lösung für Firefox:

• Verwenden Sie das integrierte Pseudoelement ::-moz-range-progress, um die Farbe der linken Seite festzulegen.

Beispielcode:

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

Dieser CSS-Code stellt sicher, dass die linke Seite der Bereichseingabe grün ist und die rechte Seite grau bleibt. Bereitstellung des gewünschten visuellen Effekts.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML5-Bereichseingaben mit zwei unterschiedlichen Farben (Grün und Grau) formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!