Has anyone used custom code in Webflow to change the arrow icon within a form select field to a custom icon?
- Add a custom class to your select element, then use custom CSS with
appearance: noneand a background image to replace the default arrow icon. - Embed this CSS in your page, test across browsers (works best in Chrome/Edge), and optionally use a wrapper div for more control.
Yes, you can use custom CSS in Webflow to change the default arrow icon in a form select dropdown to a custom icon, though with some limitations depending on the browser.
1. Understand Browser Limitations
- Native select fields are rendered by the browser and often can't be fully restyled, especially in Safari and Firefox.
- Custom arrow replacements work best in Chrome and Edge using
appearance: none.
2. Add a Custom Class to Your Select Field
- Select your select element in the Webflow Designer.
- In the Selector panel, give it a custom class like
custom-select.
3. Add Custom CSS via Embed
- Drag an Embed element onto the page or into the Page Settings → Custom Code (Inside
<head>or before</body>). - Use the following pattern in your
<style>tag:
```css
<style>
.custom-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url('https://yourdomain.com/path-to-custom-icon.svg') no-repeat right 0.75rem center;
background-size: 1rem;
padding-right: 2rem; / Optional: Leaves space for the icon /
}
</style>
```
- Important: Replace the
url()with your actual image URL (you can upload the asset to Webflow and copy the hosted link).
4. Optional: Wrapper for More Control
- For more control, wrap your select in a relative-positioned div and use an absolutely positioned arrow icon.
- Hide the native arrow using
appearance: noneand position your icon over it.
5. Test Across Browsers
- Chrome and Edge will respect most styles.
- Safari and Firefox may still show the native arrow unless further workarounds (e.g., SVG masking or fully custom dropdowns using divs) are used.
Summary
You can use custom CSS with the appearance: none style and a background image to replace the select arrow icon in Webflow. This works reliably in some browsers but may not fully override the native UI in others without more complex solutions.