Transparency css for placeholder not working for mobile browsers

I want to make input fields with zero transparency for placeholder text

<input type="text" placeholder="Enter your name here"  />

I used following css properties which fixed transparent in Firefox but it still shows text with transparency on iPhone and android browsers

i am using following css

::-webkit-input-placeholder { /* WebKit browsers */
opacity:  0.8;
-webkit-opacity:0.8;
 -khtml-opacity: 0.8;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  opacity:  0.8;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  opacity:  0.8;
}

How can i make placeholder with 100% opacity for android & iphone browsers.


Source: cross-browser

Leave a Reply