Custom Safari Dropdown

Demo to preview the plugin:

Introduction

This tiny plugin resets the Safari styles applied to the dropdown, so you can use any Bubble styles without fear that they will be overwritten by Safari.
👛 Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
Image without caption

How to setup

To set up the Custom Safari Dropdown plugin, follow these steps:
  1. Enable ID Attributes
    1. Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
      App Settings → General Tab.
      App Settings → General Tab.
  1. Add the Plugin to a Page:
      • Once installed, go to the page where you want to add the dropdown.
      • Drag the Custom Safari Dropdown element from the Visual Elements section onto your page.
  1. Configure the Dropdown:
      • In the property editor for the dropdown, configure the Dropdown ID, Options, Custom Style, and other fields to suit your needs.
      • Make sure to specify the Dropdown ID to ensure correct functionality.
  1. Test the Dropdown:
      • Preview your app to ensure the Custom Safari Dropdown is working correctly. The dropdown should now function like the native Safari dropdown, with any customizations you've set.

Plugin Element Properties

Custom dropdown

Element properties.
Element properties.
Fields:
Title
Description
Type
Dropdown ID
A unique identifier for the dropdown element. It helps to target the dropdown.
Text
Arrow
Arrow in the right corner of the dropdown. Available options: Direction Down, Double, Solid
Text (optional)
Image without caption

Changelogs