Center align placeholder issue in android

Question

In my android application there is webview to display html. In webview, for input field, we want placeholder to center align. Placing style

-webkit-input-placeholder {text-align: center;}

but placeholder is not aligning center. it's working fine with browser when we test. Could any one help me on it?

Answer 1

Android has a bug here :(, centering just won't work. You can use this polyfill: https://github.com/diy/jquery-placeholder and it supports the "force" attribute. That attribute makes it run even on browser that "support" placeholder, like android.

$('#myInput').placeholder({force:true});

Then use regular CSS to style the placeholder class provided by the plugin

.placeholder{
  text-align: center;
}