‍

Introduction

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.

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