Quick tip: How to style the arrow in a form dropdown in Webflow

Within Webflow’s native form you can use a selection dropdown element to give the user a choice between different options. For instance in some contact forms, users are asked to select how they first found out about company X and can then choose an option such as social media, ads, etc. Usually a little arrow indicates that the dropdown is clickable. However the arrow shown on the control is very close to the edge of the item and can’t be changed in regards to colour or appearance. But there’s a way around that, and that is what I want to highlight in this article.

‍

Adding custom code

The first step is to add some custom code to Webflow which makes the standard arrow invisible.

<style> select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } </style>

If you only want the arrow to disappear on a particular page and not have this change apply to all pages (and therefore all form selection dropdown elements) in your project, you have to add the code your page settings. Otherwise you go to your Site Settings → Custom Code and add the code here. In both instances you’ll need to add the code in the Head section. You can test if this works as intended for you by publishing your site and taking a look at it in the browser. Once you’ve added the code, you’ll see that the arrow has been made invisible.

Sourcing a custom arrow

Now you can move on to the next step, which is adding your own preferred arrow to the dropdown. Either draw your own arrow in a tool like Figma or Adobe Illustrator and export it as an SVG file or retrieve an arrow icon from an icon library such as The Noun Project (my favourite resource for icons!). I recommend already making the arrow your preferred size and colour, before adding it to your asset panel in Webflow.

Adding custom arrow

Once you’ve got your arrow available in your asset panel, select your selection dropdown and add your arrow as a background image. Make sure you make the following adjustments within your background image settings:
- Size: Custom (You can still adjust the height/width of your arrow if needed. I recommend just adjusting the width and leaving the height on auto)
- Tile: Don’t tile
- Position: Left: 100%, Top: 50%

Lastly you want to adjust the spacing between the edge of the control and the arrow. You do this by using the Position controls still located within the background image settings. Use Top: 50% to centre the arrow vertically. Then adjust the value for Left, depending on how much space you want between the arrow and the edge of the control.

That’s it! If you like you can also change the background colour of the dropdown control itself and the text within, by using Webflow’s style panel.