Wie kann ich Pfeilschaltflächen in Zahleneingabefeldern mithilfe von CSS deaktivieren?

CSS-Trick zum Deaktivieren von Pfeilschaltflächen beim Attribut Eingabetyp="Zahl"

Benutzer stoßen häufig auf Pfeilschaltflächen in numerischen Eingabefeldern in Desktop-Browsern wie Chrome und Safari. Allerdings können diese Tasten bestimmte Designästhetiken stören. Können wir sie mithilfe von CSS deaktivieren?

CSS-Lösung:

Um die Spin-Buttons zu deaktivieren, können wir eine CSS-Regel verwenden, die auf die einzelnen Teile des Eingabefelds abzielt:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Der ::-webkit-inner-spin-button zielt auf den inneren Pfeil-Button ab, während der ::-webkit-outer-spin-button auf den zielt äußere Pfeiltaste. Indem wir -webkit-appearance auf none setzen, blenden wir die Schaltflächen aus. Darüber hinaus stellt die Einstellung des Rands auf 0 sicher, dass nach dem Entfernen der Schaltflächen kein zusätzlicher Platz zurückbleibt.

Eine zusätzliche Verfeinerung:

Benutzer berichteten, dass auch nach dem Ausblenden der Schaltflächen Rechts neben dem Eingabefeld blieb ein kleiner Platz. Um dies zu beheben, müssen wir den Rand des Spinners selbst ins Visier nehmen:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Durch die Anwendung dieser Regel können wir den unerwünschten Platz vollständig eliminieren, was zu einem saubereren und schlankeren Design für numerische Eingabefelder führt.

Das obige ist der detaillierte Inhalt vonWie kann ich Pfeilschaltflächen in Zahleneingabefeldern mithilfe von CSS deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!