Stylisation du champ déroulant

Vous souhaitez donner un aspect personnalisé à vos champs déroulants WPForms ? Bien que les navigateurs appliquent leur propre style par défaut aux champs déroulants, vous pouvez utiliser du 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 plus encore pour vos champs déroulants.

Configuration de votre formulaire

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

• Champ de nom
• Champ d'e-mail
• Champ déroulant (pour « Comment avez-vous entendu parler de nous ? »)
• Champ de 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.

Stylisation de l'arrière-plan et du texte

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

Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, 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 des icônes Font Awesome comme flèche déroulante. Installez d'abord 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 de la stylisation des champs déroulants :

• Les éléments Select (déroulants) ne peuvent pas utiliser directement de pseudo-éléments comme ::before et ::after
• Vous devez cibler des ID de formulaire et de champ spécifiques pour la stylisation personnalisée
• La prise en charge par les navigateurs varie pour certaines propriétés CSS
• Les ID de champ se trouvent dans le panneau Options du champ de votre formulaire

Si vous avez besoin d'aide pour trouver les ID de votre formulaire ou de champ, veuillez consulter notre guide sur la recherche des ID de formulaire et de champ.

Et voilà tout ce dont vous avez besoin pour styliser le champ Déroulant sur WPForms. Ensuite, souhaitez-vous également modifier la stylisation des champs Case à cocher et Choix multiple ? Consultez notre tutoriel sur Comment personnaliser les champs Case à cocher et Radio pour qu'ils ressemblent à des boutons.