Im using the HTML5 placeholder attribute for a text input. I can center the text that the user enters, but not the placeholder text for iPhones.
Ive tried the following:
input::-webkit-input-placeholder,
input:-moz-placeholder,
::-webkit-input-placeholder,
:-moz-placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
input:-moz-placeholder, textarea:-moz-placeholder,
{
text-align:center;
}
In most of the browsers, placeholder texts are usually aligned in left. The selector uses text-align property to set the text alignment in the placeholder.
Placeholder text is the label for possible content in a text box. It can normally be found when there are prompts to fill out a form. It's the hint that tells you 'Last name' or the format with which to enter your birthdate or phone number. Placeholder text typically exists as a hint to fill in actual text.
The placeholder should only be used as a brief example of the text to be entered. Besides inconsistent support for screen readers, using a placeholder as an input label can create usability problems and issues for those with cognitive impairments...
Seems that bundling webkit and moz properties like that doesn't play nicely with webkit. Try declaring webkit separately...
input:-moz-placeholder, :-moz-placeholder,
input:-moz-placeholder, textarea:-moz-placeholder
{
text-align:center;
}
input::-webkit-input-placeholder, ::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{
text-align:center;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With