Wie kann ich die Inkrementpfeile bei einer Eingabe vom Typ „Nummer“ mithilfe von CSS anpassen?

Inkrementpfeile bei der Eingabe von Typnummern mithilfe von CSS anpassen

Sie möchten ein Eingabefeld vom Typ Nummer ändern, damit es mit benutzerdefinierten Inkrementpfeilen eleganter aussieht. Die standardmäßigen Inkrementpfeile, die oft durch Plus- und Minuszeichen dargestellt werden, können ausgeblendet und durch externe Schaltflächen ersetzt werden.

Um dies zu erreichen, können Sie die folgenden Schritte ausführen:

1. Entfernen Sie die Darstellung von Standard-Inkrementierungspfeilen durch Anwenden des folgenden CSS auf das Eingabefeld:

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

2. Erstellen Sie zwei separate Schaltflächen für Inkrementierungs- und Dekrementierungsaktionen. Verwenden Sie HTML und CSS, um ihre Stile zu definieren:

<button class="btn btn-plus">
    <i class="fa fa-plus"></i>
</button>

<button class="btn btn-minus">
    <i class="fa fa-minus"></i>
</button>

3. Fügen Sie geeignetes CSS hinzu, um den Abstand und die Ausrichtung von Elementen anzupassen:

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

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

4. Implementieren Sie die Funktionalität für die Schaltflächen zum Erhöhen und Verringern mithilfe von JavaScript:

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

Durch die Implementierung dieser Änderungen können Sie die Erhöhungspfeile im Eingabefeld anpassen, sodass es sowohl optisch ansprechend als auch funktional ist.

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