Is there a fix for the issue of a gradient covering the arrow widget on a Select Dropdown in Webflow when using Safari on iOS?

Published on
September 22, 2023

If you are experiencing the issue of a gradient covering the arrow widget on a Select Dropdown in Webflow when using Safari on iOS, there are a few possible solutions to this problem:

  1. Disable the gradient: One way to resolve this issue is to disable the gradient on the arrow widget by adding custom CSS code. To do this, follow these steps:
  • Select the arrow widget in the Webflow Designer.
  • Go to the "Styles" panel on the right-hand side.
  • Click on the "+ Add Custom CSS" button.
  • In the custom CSS field, enter the following code:
    ```css
    -webkit-mask-image: none !important;
    ```
  • Finally, click on the "Publish" button to save and update your site.
  1. Use a custom arrow: Another solution is to replace the default arrow widget with a custom arrow. This can be done by creating a new custom dropdown using HTML, CSS, and JavaScript. With this approach, you have full control over the styling and appearance of the dropdown arrow, ensuring it is not affected by any gradients or other issues.

  2. Apply a workaround: If the above solutions don't work or aren't feasible for your specific use case, you can try applying a workaround by adjusting the positioning of the gradient so that it doesn't cover the arrow widget. This can be done by adding a container around the select dropdown and applying the gradient to the container instead of the dropdown itself. This way, the arrow widget will remain unaffected by the gradient.

By following one of these solutions, you should be able to fix the issue of a gradient covering the arrow widget on a Select Dropdown in Webflow when using Safari on iOS.

Additional Questions:

  1. How can I disable the gradient on a Select Dropdown arrow widget in Webflow?
  2. What is a workaround for the issue of a gradient covering the arrow widget on a Select Dropdown in Webflow on Safari iOS?
  3. Can I use custom CSS to fix the issue of a gradient covering the arrow widget on a Select Dropdown in Webflow on Safari iOS?