Badge Webflow Award Winner 2023

Comment retirer la flèche d'un dropdown select sur webflow ?

Publié le 
21/11/2022
Modifié le 
27/3/2023
Temps de lecture : 5 min
Custom code pour cacher l'icône d'un select field webflow
Écrit par
Florian Bodelot avec un T-shirt Digidop

Florian Bodelot

Co-fondateur

Comment retirer l'icône par défaut de flèche vers le bas dans le champs select field d'un formulaire webflow (Custom Code).

Points clés à retenir

Par défaut, lorsque vous intégrez un champ select field dans un formulaire webflow, vous avez une icône ↓ (flèche vers le bas), que "vous ne pouvez pas" supprimer.

Sauf.... si vous intégrez un petit bout de custom code 😉

Découvre dans ce tutoriel comment cacher cette icône par défaut, afin de pouvoir ajouter ton icône de dropdown 100% personnalisable.

Custom code pour cacher l'icône par défaut d'un select field webflow

  1. Ajouter un élément HTML embed code editor
  2. Intégrer le custom code css ci-dessous dedans
<style>
.w-select {    
  -webkit-appearance: none;    
  -moz-appearance: none;
}
</style>
select field webflow avec icône arrow bottom
L'icône ↓ est encore présente
Custom code pour cacher l'icône de flèche dans un select field
L'icône ↓ n'est plus présente

Et voilà ! L'icône par défaut est maintenant caché ✅

Il vous est maintenant possible d'ajouter une flèche personnalisée, créée "from scratch" depuis l'interface designer de webflow.

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop