Firefox 输入占位符填充问题

Posted 2023-03-05

【中文标题】Firefox 输入占位符填充问题

【英文标题】：Firefox input placeholder padding issue

【发布时间】：2012-02-06 08:46:35

【问题描述】：

为什么 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, 0, 0.1);
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
               padding-left: 3.8%;
                outline: 0; 

【问题讨论】：

由于您使用百分比作为填充 - 这可能与：bugzilla.mozilla.org/show_bug.cgi?id=527459 ;)

对于inputs，百分比填充在 Firefox 中似乎不起作用。绝对值（例如 px）可以正常工作。

@madflow - 我在em 中提供了填充，但仍然无法正常工作

填充：2em 2em 2em 2em; - 我觉得很好（FF9）

@madflow - 但我想给出相对价值

【参考方案1】：

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

【讨论】：

链接失效或解决方案失效？因为对我来说两者都有效.. 无论如何，您可以将 text-indent: 10% 放在您的 CSS 中，看看会发生什么:)

解决方案无效。在我的firefox中仍然没有从左边的空间。 Firefox 需要更多缩进。

我已经检查了 Windows 上的 FF 8-9 和 Mac 上的 FF 10 beta - 一切正常。你的FF版本是多少？

它把光标放在我不想要的输入框边缘

文本缩进有效。移动占位符是最简单的解决方案。

【参考方案2】：

您需要使用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。因此，如果您需要使用百分比，text-indent 是您的最佳选择。

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

但该错误已于 2012 年 8 月 28 日修复并包含在 Firefox 17 中。不再需要使用 text-indent。

【参考方案3】：

尝试将padding-left改为：

text-indent:3.8%;

【参考方案4】：

您只需将padding: 0.6% 2%; 添加到input