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

Yes, it is possible to use custom code in Webflow to change the arrow icon within a form select field to a custom icon. The process involves a combination of CSS and JavaScript.

Here's how you can achieve this:

1. First, you'll need to upload your custom icon image to Webflow. Go to your Webflow project, navigate to the Assets panel, and upload the image.

2. Next, add a custom class to the select field element. You can do this by selecting the select field and going to the Styles panel on the right side of the Designer. Under the "Settings" tab, you'll find the option to add a custom class to the element. Give it a meaningful class name, such as "custom-select."

3. Now, let's write some custom CSS to style the select field and replace the default arrow icon with your custom icon. Go to the Designer's Styles panel and click on the "Custom Code" tab. In the "Head Code" section, add the following CSS:

```css
.custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("your-custom-icon-image-url.png");
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
padding-right: 20px; /* Adjust this value based on your icon's width */
}

.custom-select select::-ms-expand {
display: none;
}
```

Make sure to replace `"your-custom-icon-image-url.png"` with the URL of your custom icon image you uploaded to Webflow.

4. Lastly, you need to add some JavaScript code to listen for changes in the select field and modify the selected option's text to match the custom icon. Go to the Designer's "Custom Code" tab and in the "Footer Code" section, add the following JavaScript:

```javascript
document.addEventListener('DOMContentLoaded', function() {
const selectField = document.querySelector('.custom-select select');

selectField.addEventListener('change', function() {
const selectedOption = selectField.options[selectField.selectedIndex];
selectedOption.textContent = selectedOption.textContent + ' ▾'; // Add a down arrow icon after the text
});
});
```

Make sure to replace `'.custom-select'` with the class you assigned to your select field.

That's it! Publish your site to see the changes. The select field should now display your custom icon as the arrow, and whenever a different option is selected, the text will be appended with a down arrow icon.

Remember, custom code modifications may require periodic updates as Webflow updates its platform, so make sure to test and adapt the code as needed.