By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
How to Remove the Default Dropdown Arrow Icon in Webflow Select Fields

How to Remove the Default Dropdown Arrow Icon in Webflow Select Fields

min read
Published on
November 3, 2024


By default, Webflow includes a down arrow icon (↓) in select fields, which cannot be removed through standard settings. However, with the integration of a small piece of custom code, you can bypass this. In this guide, we will paddle you through the process of removing the default down arrow icon, freeing you to add your own customisable dropdown icon.

Step 1 - Add HTML Embed

In the Webflow Editor, add an HTML embed code editor element. You can do this by clicking the ‘Add’ panel and selecting the option titled ‘Embed’. This Embed element will allow you to add custom sections of code to your Webflow website - in this case, remove the down arrow.

Step 2 - Copy-Paste and Publish the following code.

From here, you need to add the custom code below to the ‘Embed’ box you inserted earlier.

  .w-select {
    -webkit-appearance: none;
    -moz-appearance: none;

This CSS (Cascading Style Sheets) code targets elements with the class ".w-select" and modifies the appearance by removing the default styling provided by Webflow. This will allow you or your web developer to customise the appearance of select fields more freely using your own CSS styles.


That’s it, you are now free to add in your own custom arrow. 

You can add your own custom arrow from scratch in the Webflow designer.

Need some guidance? Get in touch now.

Ready to Get Started?
Ready to take the next step? Send us a message or give us a call to discuss your project today!
01637 838 159