Firefox輸入佔位符填充問題

爲什麼Firefox不使用佔位符文本的填充。 看到這裏的例子http://jsfiddle.net/JfrfZ/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; }

來源

2012-01-09 Jitendra Vyas

由於您使用的百分比作爲填充 - 這可以涉及：https://bugzilla.mozilla.org /show_bug.cgi?id=527459;） – madflow 2012-01-09 20:39:49

百分比填充似乎不適用於Firefox的'input's。絕對值（例如px）正常工作。 – 0b10011 2012-01-09 20:40:09

@madflow - 我在'em'中給出了填充，但仍然不起作用 – 2012-01-09 20:47:15

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

來源

2012-01-09 20:37:26

我檢查你的榜樣，但鏈接它不起作用。 – 2012-01-09 20:43:37

鏈接無效或解決方案無法正常工作？因爲對於我來說都是工作的。反正你可以把'text-indent：10％'放在你的CSS中，看看會發生什麼:) – 2012-01-09 20:44:46

解決方案不起作用。在我的Firefox中仍然沒有從左邊的空間。 Firefox需要更多縮進。 – 2012-01-09 20:45:49

您需要使用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-08-28幷包含在Firefox 17有不再需要使用text-indent。

來源

2012-01-09 20:39:36

嘗試改變padding-left到：

text-indent:3.8%;

來源

2012-01-09 20:39:57

簡單，它的工作原理。 – Abram 2014-04-22 20:52:21

你只需要添加padding: 0.6% 2%;到input { }

來源

2017-05-04 08:46:23

Firefox輸入佔位符填充問題

回答

相關問題