Problema de relleno de marcador de posición de entrada de Firefox

Por qué Firefox no toma el relleno para el texto del marcador de posición. ver ejemplo aquí http://jsfiddle.net/JfrfZ/Problema de relleno de marcador de posición de entrada de Firefox

Cómo corregirlo?

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

Fuente

2012-01-09 Jitendra Vyas

dado que está utilizando porcentajes como el acolchado - esto puede estar relacionado con: https://bugzilla.mozilla.org /show_bug.cgi?id=527459;) – madflow

El relleno porcentual no parece funcionar en Firefox para 'input's. Los valores absolutos (px, por ejemplo) funcionan bien. – 0b10011

@madflow - He dado relleno en 'em' pero aún no funciona –

puede utilizar 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>

Fuente

2012-01-09 20:37:26

He comprobado el enlace de ejemplo, pero no funciona –

el enlace no funcionó o la solución no funcionó? Porque para mí ambos funcionan ... De todos modos, puedes poner 'text-indent: 10%' en tu CSS y ver qué pasa :) –

La solución no funcionó. en mi firefox todavía no tiene espacio desde la izquierda. Firefox requiere más sangría. –

Deberá usar the ::-moz-placeholder psuedo-element (anteriormente :moz-placeholder).

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

Antes había a bug in Firefox that prevented padding from working on text inputs. Así que text-indent era el camino a seguir si necesitabas usar porcentajes.

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

Sin embargo, el error se corrigió en 28/08/2012 y se incluyen en Firefox 17. Ya no hay necesidad de utilizar text-indent.

Fuente

2012-01-09 20:39:36

tratar de cambiar a padding-left:

text-indent:3.8%;

Fuente

2012-01-09 20:39:57

Simple, y funciona. – Abram

Sólo se necesita añadir padding: 0.6% 2%; en input { }

Fuente

2017-05-04 08:46:23

Problema de relleno de marcador de posición de entrada de Firefox

Respuesta

Cuestiones relacionadas