Styling des Dropdown-Felds

Möchten Sie Ihren WPForms-Dropdown-Feldern einen benutzerdefinierten Look verleihen? Während Browser ihren eigenen Standardstil für Dropdown-Felder anwenden, können Sie CSS verwenden, um ein einzigartiges Erscheinungsbild zu erstellen, das zum Design Ihrer Website passt.

Diese Anleitung zeigt Ihnen, wie Sie Farben, Ränder, Pfeile und mehr für Ihre Dropdown-Felder anpassen.

Einrichtung Ihres Formulars

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

• Namensfeld
• E-Mail-Feld
• Dropdown-Feld (für „Wie sind Sie auf uns aufmerksam geworden?“)
• Absatzfeld (für Kommentare)

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere Anleitung zum Erstellen Ihres ersten Formulars.

Hintergrund und Text gestalten

Hier erfahren Sie, wie Sie das grundlegende Erscheinungsbild Ihres Dropdown-Feldes anpassen. Denken Sie daran, 1000 durch Ihre Formular-ID zu ersetzen:

Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, sehen Sie sich dieses Tutorial zum Hinzufügen von benutzerdefinierten CSS-Stilen an.

/* 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 Standard-Dropdown-Pfeil durch ein benutzerdefiniertes 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-Icons

Für einen moderneren Look können Sie Font Awesome-Icons als Dropdown-Pfeil verwenden. Installieren Sie zuerst das Font Awesome-Plugin, falls Sie dies noch nicht getan 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;
}

Beim Gestalten von Dropdown-Feldern:

• Select- (Dropdown-) Elemente können keine Pseudo-Elemente wie ::before und ::after direkt verwenden
• Sie müssen spezifische Formular- und Feld-IDs für benutzerdefinierte Stile ansprechen
• Die Browserunterstützung variiert für bestimmte CSS-Eigenschaften
• Feld-IDs finden Sie im Bereich Feldoptionen Ihres Formulars

Wenn Sie Hilfe beim Finden Ihrer Formular- oder Feld-IDs benötigen, lesen Sie bitte unsere Anleitung zum Finden von Formular- und Feld-IDs.

Und das ist alles, was Sie benötigen, um das Dropdown-Feld auf WPForms zu gestalten. Möchten Sie als Nächstes auch das Styling für Checkbox- und Multiple Choice-Felder ändern? Sehen Sie sich unser Tutorial So passen Sie Checkbox- und Radio-Felder an, damit sie wie Schaltflächen aussehen an.