How to remove the arrow from a dropdown select on webflow?

By default, when you embed a select field in a webflow form, you have a ↓ (down arrow) icon, which "you can't" remove.

Except.... if you integrate a small piece of custom code 😉

Find out in this tutorial how to hide this default icon, so you can add your own 100% customizable dropdown icon.

Custom code to hide the default icon of a webflow select field

1. Add an HTML embed code editor element
2. Integrate the custom css code below in it

<style>
.w-select {    
  -webkit-appearance: none;    
  -moz-appearance: none;
}
</style>

And that's it! The default icon is now hidden ✅

It is now possible to add a custom arrow, created "from scratch" from the webflow designer interface.