Wie kann ich das Drehfeld bei HTML5-Zahleneingaben ausblenden?

Ausblenden des Drehfelds für die HTML5-Zahleneingabe

Moderne Browser wie Chrome zeigen häufig Drehfelder neben HTML5-Zahleneingaben an, um die Werte bequem anzupassen. Allerdings können diese Drehfelder manchmal die Benutzeroberfläche beeinträchtigen.

Eine Methode zum Ausblenden der Drehfelder ist CSS:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

Dieses CSS verbirgt effektiv die Drehfelder in Webkit-Browsern (z. B. , Chrome und Safari) und stellen gleichzeitig die Kompatibilität mit Firefox sicher, indem Sie die Eigenschaft -moz-appearance:textfield verwenden.

Durch die Implementierung dieses CSS können Sie die Anzeige von verhindern Auf-/Ab-Pfeile sorgen für eine übersichtlichere und optimierte Benutzeroberfläche für Ihre Zahleneingaben.

Das obige ist der detaillierte Inhalt vonWie kann ich das Drehfeld bei HTML5-Zahleneingaben ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!