iOS 5.0 Safari not vertically centering placeholder in text box

Question

I want to vertically center the text entered in input text boxes on the page.

Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari.

However; on iOS 5, Safari displays the typed text vertically centered... But the placeholder text and the cursor appear top aligned.

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

Anyone else facing this issue?

Duplicate of http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem — aliona, Mar 30 '12 at 09:45

Marcel · Answer 1 · 2014-03-26T10:18:14.180

40

For me there is only one solution that appears close to perfect in all browsers I tested (Chrome, FF, Safari (+iOS), IE10):

line-height: normal;

Solutions like line-height: 100% and line-height: 1; seem to be aligned towards the top of the input, especially in Chrome.

http://jsfiddle.net/5Vc3z/

Comparison:

http://jsfiddle.net/5Vc3z/1/

edited Mar 26 '14 at 10:18

answered Mar 26 '14 at 10:11

Marcel

1,279
10
12

4

I agree with this. ```line-height: normal;``` is the only solution that worked in chrome for the placeholder. ```line-height: 1;``` had no effect. – Kevin M May 18 '15 at 03:00
4

This is the correct answer. I had issues with `line-height: 100%` and `line-height: 1;` in Chrome, and this is the only answer that worked for me. – Doug S Mar 25 '16 at 06:15
1

yes, this should be correct answer. I've also tried `line-height` with `px`, but only this answer works – lomboboo May 28 '18 at 13:14
this should be the selected answer – Blue Bot Oct 20 '18 at 14:16

score 36 · Accepted Answer · answered Apr 18 '12 at 18:38

36

Setting line-height: 1; seems to fix this.

answered Apr 18 '12 at 18:38

Jesse

454
4
9

5

how come this works... what is the logic behind this one? I am confused. – sammiwei Nov 14 '12 at 02:55
3

This cuts placeholders for Chrome and IE10. Downvoted! – Oleg Jan 22 '14 at 12:58
1

This does not work across the board. See andychukse's answer below for a working solution. – Eamonn Dec 01 '14 at 11:44
1

See Marcel's answer for the correct solution. Do not use andychukse's answer, as that has problems as well. – Doug S Mar 25 '16 at 06:16

score 8 · Answer 3 · answered May 13 '13 at 13:05

8

You should use percentage for the line-height.

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>

answered May 13 '13 at 13:05

andychukse

155
1
2
11

1

Works flawlessly. You can also use any percentage value, not only 100%. This should be the accepted answer. – jviotti Feb 02 '14 at 21:10
This ought to be the accepted answer. For example, if we need to vertically center the text (by setting line-height equal to height), this renders that scenario correclty. – Kaya Toast Dec 18 '15 at 12:54
`line-height: normal;` is the better way to go, as shown in Marcel's answer. As he mentions in his answer, solutions like `line-height: 100%` and `line-height: 1;` seem to be aligned towards the top of the input, especially in Chrome. – Doug S Mar 25 '16 at 06:13
`line-height: 100%` worked perfectly for me in old and new browsers alike – MrCarrot Oct 01 '17 at 08:03

My Head Hurts · Answer 4 · 2011-12-19T10:28:17.783

~~Assuming you are just trying to make the input field appear larger then you could use padding:~~

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

Also, your input field should be:

<input type="text" class="txtBox" placeholder="Name" />

Edit

Sorry, took a little while. It appears that placeholder can be styled individually and / or inherit styles from the parent. Unfortunately there are quite a lot of styles that are not supported by Safari at this time.

The following blog has details about the styling techniques and which are / are not supported within certain browsers:

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

Updated my question... actually its the placeholder text that is not appearing centered. — Nirmal Patel, Dec 19 '11 at 09:45

score 1 · Answer 5 · answered Jun 13 '16 at 21:11

I got stuck on this issue for a long time despite using

input::-webkit-input-placeholder { line-height:normal!important; }

It turns out the having a line-height in the input element by itself was breaking my input::webkit-input-placeholder line-height.

Solution extended:

I removed the line-height in my input style and it fixed my issue.

iOS 5.0 Safari not vertically centering placeholder in text box

5 Answers5

Edit

Linked