A line of CSS code has been added to remove the default select styling in Firefox and Safari browsers. This custom modification allows the select dropdowns to match the template design consistently across different browsers.

Implementation details

CSS Modification:

We've added the following CSS code to remove the default select appearance. This line ensures that the default browser-specific styling is removed across different browsers.

/* Remove default appearance of select elements */
select {
  **-webkit-appearance: none;**
}

This line ensures that the default browser-specific styling is removed across different browsers.

Custom arrow icon

In the Webflow designer, you'll notice two arrows for select elements:

• The default browser arrow (which will not be visible on the live site)
• Our custom arrow added as a background image

To change the custom arrow icon: