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, here is the code for the css. (EDIT: This is the generated css from sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

And here's the simple html:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair

Here are screenies of the placeholder and the input field with text input:

placeholder text input

EDIT:

For now I have resorted to this jquery plugin.

It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)

I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)

Can you provide the generated CSS? That would be much easier to work with than the SASS source. — RoToRa, Feb 07 '11 at 09:52
+1 That plugin is awesome - simple and has right the options i need. Probably best placeholder solution i stumble upon till now. — easwee, Jun 21 '11 at 13:36
If anyone has a problem with bootstrap setting these two options help: font-size: large; instead of px; and line-height:normal; — necker, Dec 17 '13 at 10:31

Johansrk · Accepted Answer · 2014-04-08T19:20:07.743

238

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

edited Apr 08 '14 at 19:20

answered Apr 15 '11 at 13:08

Johansrk

5,160
3
38
37

7

Wrong. With an input element the placeholder is not effected by line-height, but padding is not the best solution. The best is to use (and I know it normally never does anything, but in this case it does) the VERTICAL-ALIGN CSS property. – Walrus Oct 02 '11 at 13:02
1

Yes, surprisingly, that DID fix the issue. And the typed text still stays vertically centered even without the line-height help. – hndcrftd May 30 '12 at 19:03
61

when there wasn't line-height on the input directly, then adding `line-height: normal;` did the trick for me – philfreo Aug 01 '12 at 22:43
Anyway you have to add line-height for ie browsers, but that do the job for safari – Kaloyan Stamatov Apr 05 '13 at 12:31

score 168 · Answer 2 · answered May 17 '16 at 13:41

168

I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.

input{
  text-indent: 10px;
}

answered May 17 '16 at 13:41

talsibony

8,448
6
47
46

score 28 · Answer 3 · answered Jun 05 '13 at 01:51

If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

score 25 · Answer 4 · edited Dec 04 '13 at 19:37

25

line-height: normal;

worked for me ;)

edited Dec 04 '13 at 19:37

Mureinik

297,002
52
306
350

answered Dec 04 '13 at 19:19

user2264934

533
5
10

Works in Safari. – monteirobrena Dec 19 '18 at 13:23
Worked in safari – SHENE Sep 25 '19 at 07:20

WasiF · Answer 5 · 2022-08-05T15:42:41.460

6

Angular Material

add   in the placeholder if padding did not work - but not a recommended way

<input matInput type="text" placeholder="&nbsp;&nbsp;Email">

Non Angular Material

Add padding to your input field, like below. Click Run Code Snippet to see demo

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>

edited Aug 05 '22 at 15:42

answered Aug 30 '19 at 14:07

WasiF

26,101
16
120
128

adding &nbps; is a very bad practice. – Cristian Sepulveda Apr 29 '22 at 22:22
@CristianSepulveda you're right. It's just a work around when nothing else works. – WasiF Apr 30 '22 at 16:53
1

you should tell that very explicit in your answer. the way it is redacted could seems like this way is a good practice. – Cristian Sepulveda May 01 '22 at 20:16
1

Nah works fine, better than using 999999 lines of CSS to achieve something simple like this. – savram Oct 21 '22 at 00:08

score 3 · Answer 6 · answered Feb 28 '14 at 10:30

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;

JobJob · Answer 7 · 2015-04-05T21:05:18.590

3

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

edited Apr 05 '15 at 21:05

answered Apr 05 '15 at 21:00

JobJob

3,822
3
33
34

2

Can you explain what this adds to the accepted answer from four years ago? – Nathan Tuggy Apr 06 '15 at 01:58
2

@NathanTuggy to me the accepted answer suggested that you remove the `line-height` attribute entirely from the element. For me that did nothing, and what fixed the problem for me was to set `line-height: 0px` – JobJob Apr 06 '15 at 11:12
Same here, this is what actually fixed the issue for me. – aeroson Aug 18 '16 at 08:16

score 3 · Answer 8 · answered Mar 17 '19 at 18:47

3

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" />

answered Mar 17 '19 at 18:47

Roman

19,236
15
93
97

score 2 · Answer 9 · answered Sep 16 '14 at 08:37

2

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

answered Sep 16 '14 at 08:37

Hiren Dihora

21
2

zykadelic · Answer 10 · 2012-03-19T14:46:39.930

2

Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.

I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.

In the meantime, you can resolve to the table on this page which shows different browser support for different styles.

Edit: Found the plugin! jquery.placeholder.min.js provides you with both full styling capabilities and cross-browser support into the bargain.

edited Mar 19 '12 at 14:46

answered Mar 19 '12 at 13:37

zykadelic

1,083
11
19

was trying to find a non placeholder fix though as i already used the jquery plugin above :) thanks for the help! – corroded Mar 20 '12 at 01:54
Keep in mind though that these are two different plugins. I'm not sure what the one you're using does (the demo doesn't work in any of my browsers), but this one uses the placeholder attribute of the element, and dynamically creates a span rendered above the input field, which provides maximum styling possibilities. – zykadelic Jul 09 '12 at 14:14

score 1 · Answer 11 · answered Feb 04 '17 at 21:41

I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.

... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.

If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.

score 1 · Answer 12 · answered Feb 07 '11 at 12:25

1

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?

answered Feb 07 '11 at 12:25

ajcw

23,604
6
30
47

hmm i checked the link and it doesn't work for me as well. do you think there's a plugin/something in my chrome that's causing it? screenshot: http://grab.by/8OFf – corroded Feb 07 '11 at 14:34
checked it using safari and it works. shouldn't chrome and safari render the same thing? – corroded Feb 07 '11 at 14:36
Hmm, I'm not aware of a plugin that would affect your layout like this, but Chrome and Safari both work fine for me (and yes, they should render the same thing). – ajcw Feb 07 '11 at 14:51
1

im using 9.0.597.84(chrome) on mac. which are you using? – corroded Feb 08 '11 at 03:30
I'm using Chrome 8.0.552.237 on Windows 7. – ajcw Feb 08 '11 at 12:27

score 1 · Answer 13 · answered Feb 11 '11 at 11:04

1

I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.

I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.

answered Feb 11 '11 at 11:04

will

4,557
6
32
33

mmm so it is confirmed then? is there a way to "downgrade" our chrome to check if it really is chrome? – corroded Feb 11 '11 at 11:41
1

it is 2013 and I still have this issue on the latest version of chrome: Version 27.0.1453.116 m – Postscripter Jul 08 '13 at 22:36

score 1 · Answer 14 · answered Oct 02 '11 at 13:04

1

The placeholder is not affected by line-height and padding is inconsistent on browsers.

I have found another solution though.

VERTICAL-ALIGN. This is probably the only time it works but try that instead and cave many lines of CSS code.

answered Oct 02 '11 at 13:04

Walrus

19,801
35
121
199

2

does not do anything for me. – Postscripter Jul 08 '13 at 22:37

HTML5 placeholder css padding

14 Answers14

Linked