[html] HTML5 placeholder css padding

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:

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)

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.

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

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.

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.

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

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

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;

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

line-height: normal; 

worked for me ;)

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?

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.

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

I have tested almost all methods given here in this page for my Angular app. Only I found solution via   that inserts spaces i.e.

Angular Material

add   in the placeholder, like

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