How to Remove Gradient on Dropdown Menus in Safari

  • Created:
  • / Author: Jace Farran

The Digioh editor provides a lot of options for styling forms, but sometimes web browsers have their own idea of how things should look. Your forms may appear different live on your site depending on what browser and device you’re using.

A common issue is for dropdowns to appear with a gradient in Safari on Apple devices.

Luckily there’s a CSS trick to remove that!

To remove dropdown gradients from your forms:

1. Find out the unique CSS ID of the fields you want to edit.
Open up your browser’s dev tools and inspect the element.


In our example, the fields are #form_input_custom1 and #form_input_custom3

2. Choose an image to replace the dropdown arrow.

We’re using green_downarrow.png in this example.

3. Paste this code into an HTML block
(Replace the information in brackets [EXAMPLE])


<style>
[#YOUR_FORM_ID(S)]  {
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url([IMAGE]) no-repeat right [BACKGROUND-COLOR];
  -webkit-appearance: none;
  -moz-appearance: none;
}
</style>

 


In our example, the code looks like this:


<style>
#form_input_custom1,
#form_input_custom3  {
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(/green_downarrow.png) no-repeat right white;
  -webkit-appearance: none;
  -moz-appearance: none;
}
</style>

 

4. Test your lightbox.
The dropdown should look exactly how you want it to now!

Tagged: