How can I turn off the gel-box styling of Safari's dropdowns using the code -webkit-appearance:none in Webflow?

To remove Safari’s default "gel-box" styling (rounded corners and shading) from dropdowns in Webflow, you need to disable its native appearance using custom CSS with -webkit-appearance: none.

1. Add a Custom Attribute or Class to Your Dropdown

• Select the Dropdown Toggle in Webflow Designer.
• Give it a custom class, like custom-dropdown.
• This lets you target it precisely with custom code.

2. Embed Custom Code Inside a Page or Site-Wide

• Go to Page Settings (for page-level code) or Project Settings > Custom Code (for global code).

• In the Before section, embed a <style> tag with this CSS:

  ```html

  ```

3. Confirm the Dropdown Element Type

• Webflow’s native Dropdown component uses div, not select.
• If you're styling a select input (like in a Form Block’s select field), then this CSS applies.
• For Webflow's custom-styled dropdowns (non-form dropdowns), -webkit-appearance doesn’t apply since it's not a native form control.

4. Add a Custom Select for Forms if Needed

• For full control, consider replacing native select elements with a custom dropdown menu built using Divs and Interactions, enabling custom styles across all browsers.
• Note: This removes native accessibility features, so use with care.

Summary

To remove Safari’s gel-box styling from a form select element in Webflow, give the element a custom class like custom-dropdown and use custom CSS with -webkit-appearance: none via an embedded <style> block. This technique doesn’t apply to Webflow’s standard Dropdown Widget, which uses divs instead of select inputs.