Wie kann ich den HTML5-Bereichseingabetyp so anpassen, dass er wie ein Fortschrittsbalken aussieht?

Anpassen des Erscheinungsbilds des HTML5-Bereichseingabetyps

Der HTML5-Bereichseingabetyp bietet eine praktische Möglichkeit, Benutzereingaben innerhalb eines bestimmten Bereichs zu sammeln. Standardmäßig rendern Browser Bereichseingaben mit ihrem nativen Stil, der möglicherweise nicht immer mit dem gewünschten UI-Design übereinstimmt. In diesem Artikel erfahren Sie, wie Sie das Erscheinungsbild des Bereichseingabetyps mithilfe von CSS anpassen können, um eine Fortschrittsbalken-ähnliche Ästhetik zu erzielen.

Problemstellung:

" Ich möchte das Erscheinungsbild des HTML5-Bereichseingabetyps so ändern, dass es einem Fortschrittsbalken ähnelt, aber die Anwendung von CSS-Attributen mit einer CSS-Klasse scheint keine Auswirkung zu haben.“

Lösung:

So passen Sie das Erscheinungsbild des Bereichseingabetyps an:

1. Natives Styling entfernen: Verwenden Sie die CSS-Eigenschaft -webkit-appearance: none !important, um die Standardeinstellung des Browsers zu überschreiben Styling. Dadurch wird sichergestellt, dass alle von Ihnen angewendeten benutzerdefinierten Stile Vorrang haben.
2. Hintergrund konfigurieren: Legen Sie die Hintergrundeigenschaft fest, um die Hintergrundfarbe und Höhe der Bereichseingabespur anzupassen.
3. Daumen anpassen:Ändern Sie das Erscheinungsbild des Daumens (des Griffs), indem Sie die Hintergrund-, Höhen- und Breiteneigenschaften des Pseudoelements -webkit-slider-thumb festlegen.

CSS-Code:

<code class="css">input[type='range'] {
    -webkit-appearance: none !important;
    background: red;
    height: 7px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: blue;
    height: 10px;
    width: 10px;
}</code>

Durch die Anwendung dieses CSS-Codes können Sie den Standardbereichseingabetyp in einen benutzerdefinierten Fortschrittsbalken mit farbiger Spur und Griff umwandeln.

Das obige ist der detaillierte Inhalt vonWie kann ich den HTML5-Bereichseingabetyp so anpassen, dass er wie ein Fortschrittsbalken aussieht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!