Wie kann ich die Inkrementpfeile einer Eingabe vom Typ Zahl mithilfe von CSS anpassen?

Inkrementpfeile bei der Eingabe von Typnummern mithilfe von CSS anpassen

In diesem Szenario möchten Sie eine Eingabe vom Typ Nummer in eine optisch ansprechendere Komponente mit angepasster Anpassung umwandeln Inkrementpfeile. Das gegebene Beispiel verwendet CSS-Techniken und einen cleveren Ansatz, um den gewünschten Effekt zu erzielen.

Lösung:

Der erste Schritt besteht darin, die Standard-Inkrementpfeile mithilfe von CSS auszublenden:

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

Dadurch werden die Pfeile ausgeblendet, sodass Sie Ihr eigenes benutzerdefiniertes Design erstellen können.

Als nächstes erstellen Sie zwei separate Schaltflächen für die Inkrementierungs- und Dekrementierungsfunktionen:

<button class="btn btn-plus">+</button>
<button class="btn btn-minus">-</button>

Position Diese Schaltflächen auf beiden Seiten des Eingabefelds mithilfe einer Eingabegruppe:

<div class="input-group inline-group">
  <div class="input-group-prepend"><button class="btn btn-outline-secondary btn-minus">-</button></div>
  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
  <div class="input-group-append"><button class="btn btn-outline-secondary btn-plus">+</button></div>
</div>

Fügen Sie abschließend JavaScript hinzu, um die Inkrementierungs- und Dekrementierungsvorgänge zu verarbeiten, wenn auf die Schaltflächen geklickt wird:

$('.btn-plus, .btn-minus').on('click', function(e) {
  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');
  const input = $(e.target).closest('.input-group').find('input');
  if (input.is('input')) {
    input[0][isNegative ? 'stepDown' : 'stepUp']()
  }
})

Dieser Ansatz kombiniert CSS, um die Standardpfeile auszublenden, benutzerdefinierte Schaltflächen, um die Inkrementierungs- und Dekrementierungsfunktion bereitzustellen, und JavaScript, um die Schaltflächenklicks zu verarbeiten und den Eingabewert entsprechend zu aktualisieren, sodass Sie die gewünschten benutzerdefinierten Inkrementierungspfeile für Ihre Eingabe vom Typ „Nummer“ erhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich die Inkrementpfeile einer Eingabe vom Typ Zahl mithilfe von CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!