Wie kann ich Spin-Buttons aus Zahleneingabefeldern in Webkit-Browsern entfernen?

Verhindern der Anzeige von Spin-Buttons in Webkit-basierten Browsern

Bei der Webentwicklung kommt es häufig zu browserübergreifenden Kompatibilitätsproblemen. Ein solches Problem tritt auf, wenn <input type="number"> auf Webkit-basierten Browsern wie Chrome und Safari. Diese Browser zeigen unerwünschte Drehschaltflächen auf der rechten Seite von Zahleneingabefeldern an.

Drehschaltflächen mit CSS deaktivieren

Um dieses Problem zu beheben, können wir CSS nutzen, um die zu deaktivieren Spin-Buttons in diesen Browsern. Der Schlüssel besteht darin, auf die spezifischen CSS-Eigenschaften abzuzielen, die das Erscheinungsbild und das Verhalten der Drehschaltflächen steuern.

Die folgende CSS-Regel erreicht dies, indem sie das Erscheinungsbild der Drehschaltflächen entfernt und ihre Ränder auf Null setzt:

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

Eine umfassende Lösung

Anfangs lässt die obige Regel möglicherweise einen kleinen Platz für die Drehschaltflächen auf der rechten Seite Seite. Um dieses Problem zu beheben, ist es notwendig, auch den Abstand im Eingabefeld auf Null zu setzen. Daher wird die vollständige CSS-Lösung zu:

input[type=number] {
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
}

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

Durch die Implementierung dieser CSS-Regel werden die Spin-Buttons effektiv deaktiviert, sodass eine saubere und konsistente Oberfläche über verschiedene Browser hinweg verbleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich Spin-Buttons aus Zahleneingabefeldern in Webkit-Browsern entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!