Wie kann ich das Erscheinungsbild von HTML5-Bereichseingabeschiebereglern in verschiedenen Browsern anpassen?

Färben von HTML5-Bereichseingabeschiebereglern für WebKit

WebKit-basierte Browser zeigen einen nativen Bereichseingabeschieberegler mit einheitlichem Erscheinungsbild an. Das Hinzufügen eines benutzerdefinierten Stils zum Ändern des Erscheinungsbilds dieses Schiebereglers kann jedoch eine Herausforderung sein.

Für Chrome:

• Überlauf-Trick: Ausblenden den Standard-Schieberegler, indem Sie „Überlauf: ausgeblendet“ in der Eingabe festlegen.
• Schatteneffekt: Erstellen Sie einen Schatteneffekt, um den Raum links vom Daumen mit der gewünschten Farbe zu füllen.

Für IE und Firefox (native Unterstützung):

• ::-ms-fill-lower: Verwenden Sie dieses Pseudoelement im IE, um den Bereich unter dem zu füllen Daumen.
• ::-moz-range-progress: Verwenden Sie dieses Pseudoelement in Firefox, um den Bereich vor dem Daumen zu füllen.

CSS-Code-Implementierung:

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  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;
}

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

HTML Beispiel:

<input type="range"/>

Das obige ist der detaillierte Inhalt vonWie kann ich das Erscheinungsbild von HTML5-Bereichseingabeschiebereglern in verschiedenen Browsern anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!