HTML5 placeholder css padding

Question

I\'ve seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn\'t want to cooperate.

Anyway, her

Answer 1

I got the same issue.

I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem

Answer 2

If you want move placeholder text right and leave the cursor on the blank space you need to add space(s) at the start of the placeholder attribute:

<input type="email" placeholder="  Your email" />

Answer 3

Setting line-height: 0px; fixed it for me in Chrome

Answer 4

I had a problem, which appears just in internet explorer. Input field was styled

height:38px;
line-height:38px;

Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.

My solution was to set:

line-height:normal;

Answer 5

Remove line-height or set using padding...it's working in all browser

Answer 6

I've created a fiddle using your screenshot as a background image and stripping out the extra mark-up, and it seems to work fine

http://jsfiddle.net/fLdQG/2/ (webkit browser required)

Does this work for you? If not, can you update the fiddle with your exact mark-up and CSS?