为什么Firefox没有为占位符文本填充填充.看这里的例子
http://jsfiddle.net/JfrfZ/
怎么解决？
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.1);
Box-shadow: 0 1px 3px rgba(0,0.15) inset;
padding-left: 3.8%;
outline: 0; }
解决方法
你需要使用
the
::-moz-placeholder psuedo-element(以前的
:moz-placeholder).
#search input::-moz-placeholder {
padding: <top> <right> <bottom> <left>;
}
曾经有过a bug in Firefox that prevented padding from working on text inputs.所以如果你需要使用百分比,那么文本缩进是你要走的路.
#search input:-moz-placeholder {
text-indent: 3.8%;
}
但该错误已在2012-08-28修复,并包含在Firefox 17中.不再需要使用text-indent.
