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
– RoToRa, Commented Feb 7, 2011 at 9:52
+1 That plugin is awesome - simple and has right the options i need. Probably best placeholder solution i stumble upon till now. — easwee
– easwee, Commented Jun 21, 2011 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
– necker, Commented Dec 17, 2013 at 10:31

Johansrk · Accepted Answer · 2014-04-08 19:20:07Z

239

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 8, 2014 at 19:20

answered Apr 15, 2011 at 13:08

Johansrk

5,2803 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Walrus Over a year ago

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.

hndcrftd Over a year ago

Yes, surprisingly, that DID fix the issue. And the typed text still stays vertically centered even without the line-height help.

philfreo Over a year ago

when there wasn't line-height on the input directly, then adding line-height: normal; did the trick for me

Kaloyan Stamatov Over a year ago

Anyway you have to add line-height for ie browsers, but that do the job for safari

talsibony · Accepted Answer · 2016-05-17 13:41:56Z

179

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, 2016 at 13:41

talsibony

8,7966 gold badges49 silver badges48 bronze badges

Comments

floribon · Accepted Answer · 2013-06-05 01:51:41Z

28

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;
}

answered Jun 5, 2013 at 1:51

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Comments

Mureinik · Accepted Answer · 2013-12-04 19:37:44Z

25

line-height: normal;

worked for me ;)

edited Dec 4, 2013 at 19:37

Mureinik

316k54 gold badges400 silver badges405 bronze badges

answered Dec 4, 2013 at 19:19

user2264934

5335 silver badges10 bronze badges

2 Comments

monteirobrena Over a year ago

Works in Safari.

Lara Over a year ago

Worked in safari

WasiF · Accepted Answer · 2022-08-05 15:42:41Z

7

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 5, 2022 at 15:42

answered Aug 30, 2019 at 14:07

WasiF

29.2k16 gold badges130 silver badges137 bronze badges

4 Comments

Cristian Sepulveda Over a year ago

adding &nbps; is a very bad practice.

WasiF Over a year ago

@CristianSepulveda you're right. It's just a work around when nothing else works.

Cristian Sepulveda Over a year ago

you should tell that very explicit in your answer. the way it is redacted could seems like this way is a good practice.

savram Over a year ago

Nah   works fine, better than using 999999 lines of CSS to achieve something simple like this.

Roman · Accepted Answer · 2019-03-17 18:47:04Z

4

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, 2019 at 18:47

Roman

22.3k18 gold badges103 silver badges105 bronze badges

Comments

Babs · Accepted Answer · 2014-02-28 10:30:26Z

3

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;

answered Feb 28, 2014 at 10:30

Babs

312 bronze badges

Comments

JobJob · Accepted Answer · 2015-04-05 21:05:18Z

3

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

edited Apr 5, 2015 at 21:05

answered Apr 5, 2015 at 21:00

JobJob

4,1973 gold badges36 silver badges36 bronze badges

3 Comments

Nathan Tuggy Over a year ago

Can you explain what this adds to the accepted answer from four years ago?

JobJob Over a year ago

@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

aeroson Over a year ago

Same here, this is what actually fixed the issue for me.

zykadelic · Accepted Answer · 2012-03-19 14:46:39Z

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, 2012 at 14:46

answered Mar 19, 2012 at 13:37

zykadelic

1,15912 silver badges19 bronze badges

2 Comments

corroded Over a year ago

was trying to find a non placeholder fix though as i already used the jquery plugin above :) thanks for the help!

zykadelic Over a year ago

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.

Hiren Dihora · Accepted Answer · 2014-09-16 08:37:52Z

2

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

answered Sep 16, 2014 at 8:37

Hiren Dihora

212 bronze badges

Comments

ajcw · Accepted Answer · 2011-02-07 12:25:29Z

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 7, 2011 at 12:25

ajcw

23.8k6 gold badges32 silver badges48 bronze badges

5 Comments

corroded Over a year ago

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: grab.by/8OFf

corroded Over a year ago

checked it using safari and it works. shouldn't chrome and safari render the same thing?

ajcw Over a year ago

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).

corroded Over a year ago

im using 9.0.597.84(chrome) on mac. which are you using?

ajcw Over a year ago

I'm using Chrome 8.0.552.237 on Windows 7.

will · Accepted Answer · 2011-02-11 11:04:48Z

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, 2011 at 11:04

will

4,5956 gold badges35 silver badges34 bronze badges

2 Comments

corroded Over a year ago

mmm so it is confirmed then? is there a way to "downgrade" our chrome to check if it really is chrome?

Postscripter Over a year ago

it is 2013 and I still have this issue on the latest version of chrome: Version 27.0.1453.116 m

Walrus · Accepted Answer · 2011-10-02 13:04:45Z

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 2, 2011 at 13:04

Walrus

20.6k40 gold badges130 silver badges215 bronze badges

1 Comment

Postscripter Over a year ago

does not do anything for me.

rb- · Accepted Answer · 2017-02-04 21:41:55Z

1

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.

answered Feb 4, 2017 at 21:41

rb-

2,36530 silver badges41 bronze badges

Collectives™ on Stack Overflow

HTML5 placeholder css padding

14 Answers 14

4 Comments

Comments

Comments

2 Comments

4 Comments

Comments

Comments

3 Comments

2 Comments

Comments

5 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

4 Comments

Comments

Comments

2 Comments

4 Comments

Comments

Comments

3 Comments

2 Comments

Comments

5 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related