火狐浏览器输入占位符内边距问题

Question

为什么Firefox不会对占位符文本使用填充。可以在此示例中查看。

如何解决？

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; }

- Jitendra Vyas

---

由于您正在使用百分比作为填充 - 这可能与以下问题相关：https://bugzilla.mozilla.org/show_bug.cgi?id=527459 ;) - madflow

百分比填充在Firefox中似乎无法在“input”中正常工作。绝对值（例如px）可以正常工作。 - 0b10011

@madflow - 我已经使用“em”设置了填充，但仍然无效。 - Jitendra Vyas

内边距：2em 2em 2em 2em；- 在我看来很好（FF9） - madflow

@madflow - 但我想要给出相对值。 - Jitendra Vyas

@madflow - 我已经解决了使用 em 的问题。 - Jitendra Vyas

Answer 1

你需要使用::-moz-placeholder伪元素（以前是::moz-placeholder）。

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

---

以前Firefox存在一个防止填充在文本输入框中生效的bug。因此，如果您需要使用百分比，text-indent是可行的选择。

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

但是这个问题在2012年8月28日被修复，并且包含在Firefox 17中。现在不再需要使用text-indent了。

- Brett DeWoody

Answer 2

你可以使用 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>

- Zoltan Toth

---

链接不起作用还是解决方案不起作用？对我来说两者都有效。无论如何，您可以在CSS中添加“text-indent: 10％”，然后查看发生了什么 :) - Zoltan Toth

解决方案不起作用，在我的火狐浏览器中仍然没有从左侧留出空间。火狐浏览器需要更多的缩进。 - Jitendra Vyas

我在Windows上的FF 8-9和Mac上的FF 10 beta中进行了检查 - 所有都可以正常工作。你的FF版本是什么？ - Zoltan Toth

它将光标放在输入框的边缘，这不是我想要的。 - Jitendra Vyas

文本缩进是有效的解决方案，可以轻松移动占位符。 - Krishnadas PC

Answer 3

尝试将 padding-left 改为：

text-indent:3.8%;

- Nick

Answer 4

你只需要在 input { } 中添加 padding: 0.6% 2%; 即可。

- Young Die