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    lt div id  search  gt     lt form gt       lt input type  text  value    placeholder  Search     name  q  autocomplete  off  class    gt     lt  form gt     lt div id  jquery-live-search  style  display  block  position  absolute  top  15px  width  219px   gt       lt ul id  search-results  class  dropdown  gt       lt  ul gt     lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     lt input type  email  placeholder    Your email    gt

User · Answer

I have tested almost all methods given here in this page for my Angular app  Only I found solution via  amp nbsp  that inserts spaces i e  Angular Material add  amp nbsp  in the placeholder  like  lt input matInput type  quot text quot  placeholder  quot  amp nbsp  amp nbsp Email quot  gt   Non Angular Material Add padding to your input field  like below  Click Run Code Snippet to see demo  x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet   gt    lt div class  container m-3 d-flex flex-column align-items-center justify-content-around  style  height 100px   gt   lt input type  text  class  pl-0  placeholder  Email with no Padding  style  width 240px   gt   lt input type  text  class  pl-3  placeholder  Email with 1 rem padding  style  width 240px   gt   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

line-height  normal     worked for me

User · Answer

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

User · Answer

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

[html] HTML5 placeholder css padding

Examples related to html

Examples related to google-chrome

Examples related to webkit

Examples related to css