Mobile iPhone drop down color - Contact Form 7

[rmcgroup]

How do I get the drop-down field color to match the rest of the fields on iPhone?

[Prasant]

Hello @rmcgroup,

Thanks for asking.

Please add following CSS under Pro > Theme Options > CSS and let us know how it goes:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3){.wpcf7-form-control-mobile {
    background: #1da0e2 !important;
    
}} 

Thanks.

[rmcgroup]

Thank you - I am not noticing a change after adding that CSS

Any other ideas?

Thank you.

[Prasant]

Hello @rmcgroup,

Thanks for updating thread.

On my end, it seems to be working fine. Please see screenshot. https://cloudup.com/cy5tnEj2obs

Can you please clear browser cache?

Thanks.

[rmcgroup]

Are you viewing it on iphone, or in developer tools inside your desktop browser?

[basanta]

Hi There,

We really sorry for the confusion, but there is no workaround select box custom styling in IOS safari with CSS.
iOS Safari takes full control of styling select lists’ internal contents. Here’s a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It’s not very preferable, but if you absolutely require changing the default styling, then I’m afraid it’s the only way to go; here’s a demo that should give you an idea on how to do the simulation:

However, you can try this CSS and let us know how this goes.

Try this it worked for me

.wpcf7-select { 
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}

Hope this helps!

Thanks