Wie kann ich in CSS benutzerdefinierte, optisch ansprechende Schaltflächen zum Erhöhen und Verringern eines Eingabefelds vom Typ „Nummer' erstellen?

Anpassen der Inkrementpfeile bei der Eingabe des Typs „Nummer“ mithilfe von CSS

Problem

Ein Eingabefeld vom Typ „Nummer“ zeigt schlecht gestaltete Inkrementpfeile an. Das Ziel besteht darin, es in ein ästhetisch ansprechenderes Design umzuwandeln, ähnlich wie separate Schaltflächen.

Vorgeschlagene Lösung

Während CSS-Techniken allein nicht vollständig das gewünschte Ergebnis erzielen können, gibt es eine clevere Problemumgehung. So geht's:

1. Die nativen Eingabepfeile ausblenden:

   Mit CSS das Aussehen festlegen: none auf dem ::-webkit-outer -spin-button- und ::-webkit-inner-spin-button-Pseudoelemente im Eingabefeld. Dadurch werden die Standardpfeile ausgeblendet.

2. Benutzerdefinierte Schaltflächen erstellen:

   Als nächstes umgeben Sie das Eingabefeld mit zwei separaten Schaltflächen, eine zum Dekrementieren und eine eine zum Inkrementieren. Verwenden Sie Font Awesome-Symbole oder benutzerdefinierte Bilder für die visuelle Darstellung der Schaltflächen.

3. Wertmanipulation behandeln:

   Ereignis-Listener zu den benutzerdefinierten Schaltflächen hinzufügen. Wenn auf eine Schaltfläche geklickt wird, lösen Sie die Methoden „stepUp“ oder „stepDown“ im ursprünglichen Eingabefeld aus, um dessen Wert entsprechend zu ändern.

Implementierungsbeispiel (Verwendung von jQuery mit Bootstrap):

<div class="input-group inline-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary btn-minus">
      <i class="fa fa-minus"></i>
    </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">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</div>

$('.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']()
  }
})

.inline-group {
  max-width: 9rem;
  padding: .5rem;
}

.inline-group .form-control {
  text-align: right;
}

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

Dieses Setup verbirgt die nativen Pfeile, fügt benutzerdefinierte Schaltflächen zum Erhöhen und Verringern hinzu und manipuliert die Eingabe Feldwert mithilfe der jQuery-Methoden „stepUp“ und „stepDown“.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS benutzerdefinierte, optisch ansprechende Schaltflächen zum Erhöhen und Verringern eines Eingabefelds vom Typ „Nummer' erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!