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

Yes, users have used custom CSS code in Webflow to replace the default arrow icon in a form select field with a custom icon. Webflow does not natively offer styling for select arrows, so custom code is required.

1. Hide the Default Select Arrow

• Browsers render native select arrows, and many do not allow full styling.
• You can use custom CSS to remove or hide the native dropdown arrow:
• Use appearance: none; or -webkit-appearance: none; on the select element.

2. Add a Custom Icon Using Background Styling

• Add a background image of your custom arrow/icon using CSS:
• Set background-image: url('your-icon.svg');
• Customize background-position, background-repeat, and background-size to align the icon properly.
• Set sufficient right padding on the select so your icon doesn't overlap the text.

3. Add the Custom Code in Webflow

• Go to Project Settings > Custom Code or add the code in the Page Settings > Custom Code > Footer section.
• Wrap the CSS in <style> tags and ensure it targets your custom select class from Webflow.

4. Add a Custom Class to Your Select Field

• In the Webflow Designer, select the Form Select field.
• Assign it a unique class like custom-select.
• Target this class in your CSS for the custom arrow styles to apply.

5. Browser Compatibility Notes

• Safari, Firefox, and Edge behave differently with select fields.
• Full replacement of the arrow is not guaranteed across all browsers; this method restyles rather than replaces the actual dropdown functionality.

Summary

To change the arrow icon in a Webflow select field, use custom CSS to hide the native arrow and replace it with a background image of your custom icon. Webflow allows this via the Custom Code section, and the approach is widely used by users looking for custom form styling.