Has anyone used custom code in Webflow to change the arrow icon within a form select field to a custom icon?

Yes, Webflow natively doesn’t allow styling or replacing the default arrow on select fields, but you can use custom code and CSS to hide the native arrow and display a custom one.

1. Remove the Native Arrow

• Target the select element with a class (e.g., .custom-select) to apply custom styles.
• Use custom CSS to remove the browser’s default arrow. Example:
• appearance: none; (or -webkit-appearance, -moz-appearance for compatibility)
• background-image: none;

2. Add a Custom Icon

• Wrap the select element inside a div with position: relative.
• Inside the wrapper, add a custom arrow icon (either as SVG or embedded image) as a separate element.
• Use absolute positioning to place the custom icon on top of the select field where the native arrow used to be.

3. Use Required Webflow HTML Embed or Custom Code

• Place a Custom Code Embed inside the Webflow Designer to inject your CSS.
• Example styles (placed inside <style> tags within the Embed):
• .custom-select { appearance: none; padding-right: 2rem; }
• .custom-select-wrapper::after { content: url('your-arrow.svg'); position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; }

4. Test Across Browsers

• Browser support varies, especially for form controls like <select>.
• Make sure your custom styles work well in both Chrome and Safari.
• You may not be able to achieve 100% identical styling across all browsers due to OS-level rendering constraints.

Summary

You can replace the default select field arrow in Webflow by setting the select field to appearance: none, then overlaying a custom icon using a wrapper and positioned CSS. Use Custom Code Embeds in Webflow to accomplish this styling.