Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center placeholder text in iPhone

Tags:

html

css

iphone

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; 
}
like image 800
Evanss Avatar asked Apr 19 '12 14:04

Evanss


People also ask

Can you align the text inside the placeholder?

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.

What does placeholder text do?

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.

Should you use placeholder 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...


1 Answers

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; 
}
like image 136
hcharge Avatar answered Sep 30 '22 05:09

hcharge