placeholder css

[macpheek]

Hi,

I have form form’s placeholder set to

::-webkit-input-placeholder { opacity:1!important; }
::-moz-placeholder { opacity:1!important; }
:-ms-input-placeholder { opacity:1!important; }
:-moz-placeholder { opacity:1!important; }

However it doesn’t seem to be working for android device or for safari.
Is there something I’m missing? Link to page – http://kmdesign.website/StormRoofing/pitched-roofing/

Hope someone can help :-)

[uxfed]

Is it that form with the dark text on the blue background? If so, I’d suggest using the style color: white instead of opacity.

The placeholder code you reference is correct (though I think these days quite a few browsers support the unprefixed version (not all!)).

[macpheek]

Hi, thanks for your reply. Below is the new code, however it’s still not showing as correctly in safari and android

.quoteform::-webkit-input-placeholder, .sideform::-webkit-input-placeholder { color:white!important; opacity:1!important; }
.quoteform::-moz-placeholder, .sideform::-moz-placeholder { color:white!important; opacity:1!important; }
.quoteform:-ms-input-placeholder, .sideform:-ms-input-placeholder { color:white!important; opacity:1!important; }
.quoteform:-moz-placeholder, .sideform:-moz-placeholder { color:white!important; opacity:1!important; }

Hope you can help

[uxfed]

You’re applying the styles to the wrong element. You need to apply the placeholder styles to the input elements, not the form.

You’ll want something like .wpcf7-form-control::-webkit-input-placeholder for example.

[macpheek]

That worked thanks so much! :-)

[Author]

Posts