Gestalten des Dropdown-Feldes

Möchten Sie Ihren WPForms Dropdown-Feldern ein individuelles Aussehen geben? Während Browser ihr eigenes Standard-Styling auf Dropdown-Felder anwenden, können Sie CSS verwenden, um ein einzigartiges Aussehen zu schaffen, das zum Design Ihrer Website passt.

In dieser Anleitung erfahren Sie, wie Sie Farben, Rahmen, Pfeile und vieles mehr für Ihre Dropdown-Felder anpassen können.

Einrichten Ihres Formulars

Beginnen Sie mit der Erstellung eines Formulars mit einem Dropdown-Feld. Für dieses Beispiel erstellen wir ein einfaches Kontaktformular mit:

• Feld Name
• E-Mail-Feld
• Dropdown-Feld (für "Wie haben Sie von uns erfahren?")
• Absatzfeld (für Kommentare)

Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte unseren Leitfaden zur Erstellung Ihres ersten Formulars.

Gestaltung von Hintergrund und Text

Im Folgenden wird beschrieben, wie Sie das Aussehen Ihres Dropdown-Feldes anpassen können. Denken Sie daran, zu ersetzen 1000 mit Ihrer Formular-ID:

Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefinierte CSS-Stile hinzufügen können, lesen Sie bitte diese Anleitung zum Hinzufügen benutzerdefinierter CSS-Stile.

/* Basic dropdown styling */
form#wpforms-form-1000 select {
    background-color: #b95d52;
    color: #fff;
    border: 1px solid #b95d52;
    border-radius: 5px;
    padding: 10px;
}

/* Hover and focus states */
form#wpforms-form-1000 select:hover,
form#wpforms-form-1000 select:focus {
    background-color: #fff;
    color: #b95d52;
    box-shadow: none;
}

Anpassen des Dropdown-Pfeils

Sie können den standardmäßigen Dropdown-Pfeil durch ein eigenes Bild ersetzen:

/* Remove default arrow */
form#wpforms-form-1000 select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    
    /* Add custom arrow image */
    background-image: url('your-arrow-image.png');
    background-repeat: no-repeat;
    background-position: right .7em center;
    background-size: 25px 25px;
}

/* Hide default arrow in IE */
form#wpforms-form-1000 select::-ms-expand {
    display: none;
}

Hinzufügen von Font Awesome-Symbolen

Für ein moderneres Aussehen können Sie Font Awesome-Symbole als Dropdown-Pfeile verwenden. Installieren Sie zunächst das Font Awesome-Plugin, falls Sie es noch nicht installiert haben.

/* Hide default arrow and prepare for Font Awesome */
#wpforms-form-1000-field_24-container select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 30px;
}

/* Add Font Awesome arrow */
#wpforms-form-1000-field_24-container::after {
    font-family: fontawesome;
    content: "\f149";  /* Font Awesome down arrow code */
    position: absolute;
    top: 53%;
    left: 95%;
    pointer-events: none;
}

Bei der Gestaltung von Dropdown-Feldern:

• Auswahl-(Dropdown-)Elemente können nicht direkt Pseudo-Elemente wie ::before und ::after
• Sie müssen bestimmte Formular- und Feld-IDs für das benutzerdefinierte Styling auswählen
• Die Browserunterstützung variiert für bestimmte CSS-Eigenschaften
• Die Feld-IDs finden Sie im Feldoptionen-Panel Ihres Formulars

Wenn Sie Hilfe bei der Suche nach Ihren Formular- oder Feld-IDs benötigen, lesen Sie bitte unseren Leitfaden zur Suche nach Formular- und Feld-IDs.

Und das ist alles, was Sie brauchen, um das Dropdown-Feld in WPForms zu gestalten. Möchten Sie als Nächstes auch das Styling von Checkbox- und Multiple-Choice-Feldern ändern? Sehen Sie sich unser Tutorial über die Anpassung von Checkbox- und Radio-Feldern an, damit sie wie Schaltflächen aussehen.