Kann ich eine HTML5-Bereichseingabe nur mit CSS mit zwei verschiedenen Farben gestalten?

HTML5-Bereichseingabe mit verschiedenen Farben formatieren

Frage:

Ist eine Formatierung möglich? eine HTML5-Bereichseingabe, um auf beiden Seiten des Schiebereglers unterschiedliche Farben zu haben? Zum Beispiel links grün und rechts grau? Idealerweise wäre eine reine CSS-Lösung zu bevorzugen, die mit WebKit-Browsern kompatibel ist.

Lösung:

Absolut, diese Anpassung mit reinem CSS zu erreichen ist machbar. Unsere Lösung nutzt browserspezifische CSS-Eigenschaften, um auf verschiedene Browser abzuzielen:

Chrome:

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #9a905d;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background: #434343;
  box-shadow: -80px 0 0 80px #43e5f7;
}

Firefox:

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

Internet Explorer:

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

HTML-Snippet:

<input type="range"/>

Dieses Code-Snippet erstellt eine Bereichseingabe mit einer grünen linken Seite und einer grauen rechten Seite . Um die volle Funktionalität in allen gängigen Browsern zu gewährleisten, stellen Sie sicher, dass alle bereitgestellten browserspezifischen Codeblöcke enthalten sind.

Das obige ist der detaillierte Inhalt vonKann ich eine HTML5-Bereichseingabe nur mit CSS mit zwei verschiedenen Farben gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!