Dropdown Blue Placeholder on Mobile

Hi all,

I’m looking for a solution to change the font color of my dropdown box on Apple devices (Not sure if it applies to Android too).

Link to see: Form Test – TCC Staging

Thanks!

Gravity Forms doesn’t set any color for the drop downs (or other field types), that’s inherited from your theme styles. Also builders or other third-party plugins can alter the default styles for your form. You can confirm how the form is displayed using default styles by using the Preview button in the form editor screen.

Checking your page I see in fact that your theme is targeting several form elements, including the drop downs. So I would recommend you to reach your theme developer for a fix and prevent the issue happening again in future versions of the theme.

/* change black to any color you want. */
.gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield select.large {
    color: black;
}

Just checking the form preview it displays fine on laptop (Macbook) but again on the preview on my iPhone it displays the blue links. Just looking through the themes targets, none of them appear to display the blue colour, which is confusing me. Are you able to replicate yourself?

Hi Derek,

No such luck with the css. Doesn’t reflect on my iPhone annoyingly

On iPhone.

/* try this one . */
@media only screen and (max-width:675px) {
.gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield select.large {
color: black!important;
}
}

Also, you could try clearing your phones cache. I checked your site with Google dev tools for mobile break points as well and the fields aren’t blue. Could be some kind of css that was added to your local storage as well. Interesting.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.