Anpassen von Zahlenfeldern ohne Pfeile

Möchten Sie die Standard-Pfeiltasten entfernen, die im Feld Zahlen in WPForms angezeigt werden? Es ist üblich, dass Browser wie Chrome, Safari und Firefox ihre eigenen Standardstile für Formularfelder anwenden, einschließlich der Anzeige von Pfeiltasten bei Zahlenfeldern. Wenn Sie diese Pfeile entfernen möchten, können wir Sie durch den Prozess führen.

Mit ein wenig CSS können Sie das Erscheinungsbild des Formularfelds mühelos ändern. In diesem Tutorial stellen wir Ihnen das notwendige CSS zur Verfügung, um die Pfeile aus dem Feld zu entfernen.

Entfernen der Pfeile im Zahlenfeld

Um diesen Stil zu entfernen, müssen wir das benutzerdefinierte CSS kopieren und auf unsere Website einfügen.

Wenn Sie Hilfe benötigen, wie und wo Sie Ihr benutzerdefiniertes CSS hinzufügen können, lesen Sie bitte dieses Tutorial.

Für ein bestimmtes Formular

Dieses CSS wird nur auf Zahlen-Formularfelder in der spezifischen Formular-ID 612 angewendet. Sie müssen diese ID aktualisieren, bevor Sie dieses CSS verwenden.

Wenn Sie Hilfe benötigen, wie Sie Ihre Formular-ID finden, sehen Sie sich bitte dieses Tutorial an.

form#wpforms-form-612 input[type="number"]::-webkit-outer-spin-button, form#wpforms-form-612 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
form#wpforms-form-612 input[type="number"] {
    -moz-appearance: textfield;
}

Für alle Formulare

Wenn Sie die Pfeile nur für alle Ihre Formulare entfernen möchten, würden Sie dieses CSS verwenden.

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

Dieses CSS ändert nicht die Funktionalität des Formularfelds. Nur Zahlen werden im Zahlen-Formularfeld akzeptiert, aber nach dem Hinzufügen des CSS sehen Sie die Pfeile auf dem Feld nicht mehr.

Und das ist alles, was Sie brauchen, um die Auf- und Abwärtspfeile im Feld Zahlen zu entfernen. Möchten Sie auch andere Formularfelder gestalten? Sehen Sie sich unseren Artikel über Styling für textbasierte Felder hinzufügen an.