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

HTML5-Bereichseingaben mit unterschiedlichen Farben auf beiden Seiten gestalten

HTML5-Bereichseingaben so zu gestalten, dass sie auf der linken und rechten Seite kontrastierende Farben haben gemeinsame Bitte. Wenn der Benutzer mit dem Schieberegler interagiert, ändert sich die Farbe dynamisch und gibt so eine visuelle Rückmeldung zum Eingabewert. Diesen Effekt in reinem CSS zu erzielen mag wie eine Herausforderung erscheinen, aber es ist möglich.

Für Chrome besteht der Trick darin, den Überlauf vor der Eingabe zu verbergen und einen Boxschatten zu verwenden, um den Rest zu füllen Raum mit der gewünschten Farbe. Mit dieser Technik wird die linke Seite des Schiebereglers effektiv mit einer benutzerdefinierten Farbe bemalt.

Für IE und Firefox können wir integrierte CSS-Pseudoelemente nutzen:

• In IE: Mit ::-ms-fill-lower können Sie den unteren Teil des Schiebereglers formatieren und so das Grün aktivieren Farbe.
• In Firefox: ::-moz-range-progress gibt Ihnen eine ähnliche Kontrolle, sodass Sie die Farbe für den gefüllten Teil des Schiebereglers definieren können.

Um die CSS-Lösung zu veranschaulichen, sehen Sie sich den folgenden Code an:

@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;
  }
}

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;
}

Mit diesem CSS-Code können Sie Ihre HTML5-Bereichseingabe formatieren um auf beiden Seiten des Schiebereglers unterschiedliche Farben anzuzeigen und so eine optisch ansprechende und benutzerfreundliche Oberfläche für Ihre Webanwendung zu schaffen.

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