How can I turn off the gel-box styling of Safari's dropdowns using the code -webkit-appearance:none in Webflow?
TL;DR
- Add a custom class to the
<select>element in Webflow. - Insert CSS using
-webkit-appearance: none;along withappearanceproperties in a<style>tag via Page or Site Settings. - Manually style the dropdown in Webflow as default browser styles are removed.
- Preview and publish the site, testing in Safari to ensure changes are applied.
To remove Safari’s default gel-box styling (rounded corners, inner shadow) on <select> dropdowns, you can use the -webkit-appearance: none; CSS property in Webflow. Here's how to implement it properly:
1. Add a Custom Class to Your Select Element
- Select your dropdown element in Webflow’s Designer.
- Add a class (e.g.,
custom-dropdown) to target it specifically. - This ensures you're not affecting all
<select>elements unless intended.
2. Apply Custom CSS with -webkit-appearance
- Go to the Page Settings (or Site Settings > Custom Code) depending on whether the change should be site-wide or page-only.
- In the Before </body> or Inside <head> section, add the following inline CSS:
`<style>
.custom-dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
}
</style>`
- This removes the gel-box styling across most modern browsers, including Safari.
3. Set Webflow Visual Styles (Optional)
- Since you removed browser default styling, manually style the dropdown in Webflow:
- Add borders, custom icons, padding, etc.
- Add a background image (like a down arrow) if needed for branding.
4. Preview and Publish
- Use Webflow’s Preview and also test on a real Safari browser to confirm gel-box removal.
- Publish your changes to view them live in the browser.
Summary
To remove Safari’s gel-box styling from <select> fields, add -webkit-appearance: none; in a <style> tag targeting your dropdown class. Then, style it manually in Webflow for a fully customized look.