### [Comment personnaliser les étiquettes des choix d’images](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/)
**Publié le :** 15 avril 2024
**Auteur :** Umair Majeed
**Contenu :**
Vous souhaitez améliorer l’attrait visuel de vos étiquettes de choix d’images dans WPForms ? Que vous utilisiez des choix d’images pour des champs de cases à cocher ou de choix multiples, vous pouvez créer des effets de survol attrayants et styliser vos étiquettes à l’aide de CSS.
Ce guide vous montrera plusieurs façons de personnaliser vos étiquettes de choix d’images pour créer une expérience de formulaire plus interactive et visuellement attrayante.
## Configuration de votre formulaire
Commençons par créer un formulaire et ajouter nos champs. Nous inclurons également un champ **Case à cocher** qui utilise des **choix d’images**.
Si vous avez besoin d’aide pour créer un formulaire avec des choix d’images, veuillez consulter notre guide sur la [configuration des choix d’images](https://wpforms.com/docs/how-to-add-image-choices-to-fields/).
## Personnalisation des étiquettes de choix d’images
Ces exemples de CSS vous aideront à créer divers effets visuels pour vos étiquettes de choix d’images. Pour tous les exemples, n’oubliez pas de remplacer `form#wpforms-form-1000` par l’ID de votre propre formulaire. Si vous avez besoin d’aide pour trouver l’ID de votre formulaire, veuillez consulter notre guide sur la [recherche des ID de formulaire et de champ](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Superposer les étiquettes au survol
Ce style crée un effet de superposition élégant où les étiquettes apparaissent sur l’image lorsque les utilisateurs la survolent :
#### Ajouter des bordures et des effets de boîte
Utilisez les propriétés de bordure et de boîte pour créer des cadres, des bordures ou des coins arrondis autour des étiquettes.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
```
#### Faire pivoter les images au survol
En appliquant la règle CSS `transform`, nous introduirons une touche délicieuse à vos images. Au survol, elles pivoteront élégamment, injectant un élément interactif ludique dans votre formulaire. Cet effet attrayant captive les visiteurs lorsqu’ils naviguent dans votre sélection d’images.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
```
#### Ombre portée au survol
Pour améliorer vos images avec une touche de profondeur et de dimension, nous mettons en œuvre un effet d’ombre portée au survol et supprimons la bordure par défaut au survol. Lorsque vos visiteurs survolent chaque image, une ombre subtile apparaît gracieusement, conférant à votre formulaire un sens captivant de profondeur et d’interactivité.
```
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
```
#### Combiner plusieurs effets (bordure, étiquettes et ombre portée au survol)
Dans ce dernier exemple, nous allons combiner certains des CSS que nous avons déjà utilisés.
Lorsque vous survolerez l’image, vous verrez l’étiquette sur l’image.
Et ce ne sont là que quelques exemples de la facilité avec laquelle vous pouvez personnaliser les étiquettes pour les **choix d’images**. Souhaitez-vous également supprimer les espaces blancs autour des images ? Consultez notre article sur [Comment supprimer les espaces blancs autour des choix d’images](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/ "Comment supprimer les espaces blancs autour des choix d’images").
**Catégories :** Style
---