Firefox input placeholder padding issue

Question

Why Firefox not taking padding for Placeholder text. see example here http://jsfiddle.net/JfrfZ/

How to fix it?

HTML

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

CSS

#search input[type="text"] {
           background: url(../img/search-icon.png) no-repeat 2.6% 50% #fcfcfc;
               background-size: 6%;
               border: 1px solid #d1d1d1;
               font: normal 1.7em Arial,Helvetica,Sans-serif;
               color: #bebebe;
               width: 33%;
               padding: 0.6% 2%;
               border-radius: 3em;
               text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
               padding-left: 3.8%;
                outline: 0; }

Eichhorn

Since you are using percentages as padding - this can be related to: bugzilla.mozilla.org/show_bug.cgi?id=527459 ;) – Rositaroskes

Percent padding doesn't appear to work in Firefox for inputs. Absolute values (px, for example) work fine. – Chandachandal

@Rositaroskes - I given padding in em but still not working – Eichhorn

padding: 2em 2em 2em 2em; - looks fine to me (FF9) – Rositaroskes

@Rositaroskes - But I want to give relative value – Eichhorn

@Rositaroskes - I solved the issue with em – Eichhorn

Answer 1

You’ll need to use the ::-moz-placeholder psuedo-element (formerly :moz-placeholder).

 #search input::-moz-placeholder {
     padding: <top> <right> <bottom> <left>;
 }

---

There used to be a bug in Firefox that prevented padding from working on text inputs. So text-indent was the way to go if you needed to use percentages.

#search input:-moz-placeholder {
    text-indent: 3.8%;     
}

But the bug was fixed on 2012-08-28 and included in Firefox 17. There is no longer a need to use text-indent.

Meninges

Answer 2

you can use text-indent

#search input[type="text"] {
    background: url(../img/search-icon.png) no-repeat 2.6% 50% #fcfcfc;
    background-size: 6%;
    border: 1px solid #d1d1d1;
    font: normal 1.7em Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 33%;
    padding: 0.6% 2%;
    border-radius: 3em;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    padding-left: 3.8%;
    outline: 0; 
    text-indent: 3.8%
}

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Thaumatology

the link didn't work or the solution didn't work? Because for me both work.. Anyways you can just put the text-indent: 10% in your CSS and see what happens :) – Thaumatology

Solution didn't work. in my firefox still has no space from left. Firefox require more indent. – Eichhorn

I've checked in FF 8-9 on Windows and FF 10 beta on Mac - all work. What's your FF version? – Thaumatology

It takes the cursor at the edge of input box which i don't want – Eichhorn

Text indent works. It is the easiest solution to move placeholder. – Westerman

Answer 3

Try to change padding-left to:

text-indent:3.8%;

Probe

Answer 4

You just need add padding: 0.6% 2%; into input { }

Tupelo