Wprowadzenie do wypełniacza zastępczego dla wkładki Firefox

Dlaczego Firefox nie przyjmuje dopełnienia tekstu zastępczego. zobacz przykład tutaj: http://jsfiddle.net/JfrfZ/Wprowadzenie do wypełniacza zastępczego dla wkładki Firefox

Jak to naprawić?

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

Źródło

2012-01-09 Jitendra Vyas

Ponieważ używasz procentowe wypychania - może to być związane z: https://bugzilla.mozilla.org /show_bug.cgi?id=527459;) – madflow

Podkładka procentowa nie działa w Firefoksie dla 'wejść'. Wartości bezwzględne (np. Px) działają bez zarzutu. – 0b10011

@madflow - Dałem padding w 'em' ale nadal nie działa –

można użyć 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>

Źródło

2012-01-09 20:37:26

Sprawdziłem przykładowy link, ale to nie działa. –

łącze nie działa lub rozwiązanie nie działa? Ponieważ dla mnie obaj działają .. W każdym razie możesz po prostu wstawić "wcięcie tekstu: 10%" w swoim CSS i zobaczyć, co się stanie :) –

Rozwiązanie nie działa. w moim firefox wciąż nie ma miejsca od lewej. Firefox wymaga więcej wcięć. –

Musisz użyć the ::-moz-placeholder psuedo-element (poprzednio :moz-placeholder).

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

Kiedyś a bug in Firefox that prevented padding from working on text inputs. Tak więc text-indent był sposobem, aby przejść, jeśli chcesz użyć procentów.

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

Ale błąd został ustalony na 2012-08-28 i zawarte w Firefox 17. Nie ma już potrzeby korzystania text-indent.

Źródło

2012-01-09 20:39:36

Spróbuj zmienić padding-left do:

text-indent:3.8%;

Źródło

2012-01-09 20:39:57

Prosty i działa. – Abram

Wystarczy dodać padding: 0.6% 2%; do input { }

Źródło

2017-05-04 08:46:23

Wprowadzenie do wypełniacza zastępczego dla wkładki Firefox

Odpowiedz

Powiązane problemy