Firefox 输入占位符填充问题

为什么 Firefox 不为占位符文本添加填充。请参阅此处的示例http://jsfiddle.net/JfrfZ/ 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, 0, 0.1);
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
               padding-left: 3.8%;
                outline: 0; }

你需要使用the ::-moz-placeholder伪元素 https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder（以前:moz-placeholder https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder).

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

过去有Firefox 中的一个错误，导致填充无法处理文本输入 https://bugzilla.mozilla.org/show_bug.cgi?id=527459. So text-indent如果您需要使用百分比，这是可行的方法。

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

但该bug已于2012-08-28修复并包含在Firefox 17中。不再需要使用text-indent.