Wie kann ich Zahleneingabe-Spinnerschaltflächen in WebKit-Browsern entfernen?

Unterdrückung der Eingabetyp-„Zahlen“-Drehschaltflächen im Webkit

Beim Entwerfen einer Website sowohl für mobile (Mobile Safari) als auch für Desktop-Benutzer (Chrome , Safari) berücksichtigen Sie die visuelle Ästhetik von Eingabefeldern, die für numerische Eingaben vorgesehen sind, indem Sie verwenden. Etikett. Auf Mobilgeräten erleichtert dieser Tag optimal die numerische Eingabe über einen Ziffernblock. In Chrome und Safari werden jedoch neben diesen Feldern unerwünschte Drehschaltflächen angezeigt, die möglicherweise mit der Designästhetik kollidieren.

Spinnerschaltflächen mithilfe von CSS deaktivieren

Um diese Schaltflächen mithilfe von CSS zu entfernen , nutzen Sie den folgenden Code:

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

Dieser Code verbirgt effektiv die inneren und äußeren Drehschaltflächen und sorgt so für ein sauberes und elegantes Design für numerische Eingabefelder. Denken Sie außerdem daran, den Rand dieser Elemente auf Null zu setzen, um unerwünschte Abstände um das Eingabefeld herum zu verhindern.

Das obige ist der detaillierte Inhalt vonWie kann ich Zahleneingabe-Spinnerschaltflächen in WebKit-Browsern entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!