Styliser le champ déroulant

Vous voulez donner à vos champs déroulants WPForms un aspect personnalisé ? Bien que les navigateurs appliquent leur propre style par défaut aux champs déroulants, vous pouvez utiliser CSS pour créer une apparence unique qui correspond au design de votre site.

Ce guide vous montrera comment personnaliser les couleurs, les bordures, les flèches et bien plus encore pour vos champs déroulants.

Mise en place du formulaire

Commencez par créer un formulaire avec un champ déroulant. Pour cet exemple, nous allons créer un simple formulaire de contact avec :

• Champ du nom
• Champ d'adresse électronique
• Champ déroulant (pour "Comment avez-vous entendu parler de nous ?")
• Champ paragraphe (pour les commentaires)

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter notre guide sur la création de votre premier formulaire.

Styliser l'arrière-plan et le texte

Voici comment personnaliser l'apparence de base de votre champ déroulant. N'oubliez pas de remplacer 1000 avec votre numéro de formulaire :

Si vous avez besoin d'aide pour savoir comment et où ajouter des feuilles de style CSS personnalisées, veuillez consulter ce tutoriel sur l'ajout de styles CSS personnalisés.

/* 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;
}

Personnalisation de la flèche déroulante

Vous pouvez remplacer la flèche déroulante par défaut par une image personnalisée :

/* 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;
}

Ajout d'icônes Font Awesome

Pour un look plus moderne, vous pouvez utiliser les icônes Font Awesome comme flèche déroulante. Tout d'abord, installez le plugin Font Awesome si ce n'est pas déjà fait.

/* 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;
}

Lors du stylisme des champs déroulants :

• Les éléments de sélection (dropdown) ne peuvent pas utiliser directement des pseudo-éléments tels que ::before et ::after
• Vous devez cibler des identifiants de formulaire et de champ spécifiques pour la personnalisation du style
• La prise en charge par les navigateurs varie pour certaines propriétés CSS
• Les identifiants de champ se trouvent dans le panneau des options de champ de votre formulaire.

Si vous avez besoin d'aide pour trouver vos identifiants de formulaire ou de champ, consultez notre guide sur la recherche des identifiants de formulaire et de champ.

Et c'est tout ce dont vous avez besoin pour styliser le champ Dropdown dans WPForms. Ensuite, voudriez-vous aussi changer le style des champs Checkbox et Multiple Choice? Consultez notre tutoriel sur Comment personnaliser les champs Checkbox et Radio pour qu'ils ressemblent à des boutons.