Проблема заполнения заполнителя ввода в Firefox

Question

Почему 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; }

Answer 1

Вам нужно будет использовать псевдоэлемент ::-moz-placeholder (ранее :moz-placeholder).

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

---

Там используется длябыть ошибка в Firefox, из-за которой отступы не могли работать с текстовыми вводами .Так что text-indent был подходящим вариантом, если вам нужно было использовать проценты.

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

Но ошибка была исправлена ​​в 2012-08-28 и включена в Firefox 17. Больше нет необходимости использоватьtext-indent.

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>

Answer 3

Попробуйте изменить padding-left на:

text-indent:3.8%;

Answer 4

Вам просто нужно добавить padding: 0.6% 2%; в input { }