Wie kann ich HTML5-Bereichseingaben mit unterschiedlichen Farben auf jeder Seite gestalten?

HTML5-Bereichseingaben mit unterschiedlichen Farben auf jeder Seite gestalten

Um unterschiedliche Farben vor und nach dem Schieberegler einer HTML5-Bereichseingabe zu erzielen, ist ein Browser erforderlich. spezifisch nähert sich.

Chrome:

• Verstecken Sie den Standardschieberegler, indem Sie „overflow: versteckt“ und „width“ für das Eingabeelement festlegen.
• Füllen Sie den Bereich aus links vom Daumen mit der gewünschten Hintergrundfarbe.
• Erstellen Sie einen benutzerdefinierten Schieberegler-Daumen und positionieren Sie ihn 80 Pixel rechts der natürlichen Position des Daumens.
• Stellen Sie sicher, dass der benutzerdefinierte Daumen größer als die Breite der Eingabe ist, um den Standarddaumen vollständig abzudecken.

IE:

• Nutzen Sie das Pseudoelement ::-ms-fill-lower, um die Hintergrundfarbe links davon festzulegen Daumen.
• Verwenden Sie ::-ms-fill-upper, um die Hintergrundfarbe rechts vom Daumen festzulegen.

Firefox:

• Verwenden Sie das Pseudoelement ::-moz-range-progress, um die Hintergrundfarbe links davon festzulegen Daumen.
• Legen Sie die Hintergrundfarbe des Tracks mit ::-moz-range-track fest.

Beispielcode:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

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

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

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

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

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

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

<input type="range" />

Das obige ist der detaillierte Inhalt vonWie kann ich HTML5-Bereichseingaben mit unterschiedlichen Farben auf jeder Seite gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!