Firefox input placeholder padding issue
12,139
Solution 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
.
Solution 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>
Solution 3
Try to change padding-left
to:
text-indent:3.8%;
Solution 4
You just need add padding: 0.6% 2%;
into input { }
Author by
Jitendra Vyas
Hi, I am Jitendra a front-end developer from India specializing in web standards, accessibility, and usability based development.
Updated on June 20, 2022Comments
-
Jitendra Vyas almost 2 years
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; }
-
Zoltan Toth over 12 yearsthe 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 :) -
Jitendra Vyas over 12 yearsSolution didn't work. in my firefox still has no space from left. Firefox require more indent.
-
Zoltan Toth over 12 yearsI've checked in FF 8-9 on Windows and FF 10 beta on Mac - all work. What's your FF version?
-
Jitendra Vyas over 12 yearsIt takes the cursor at the edge of input box which i don't want
-
Krishnadas PC over 9 yearsText indent works. It is the easiest solution to move placeholder.