HTML5 placeholder css padding

Question

Ya he visto esto post y he intentado todo lo posible para cambiar el relleno de mi marcador de posición, pero desafortunadamente parece que no quiere cooperar.

De todos modos, aquí está el código para el css. (EDITAR: Este es el css generado a partir de Sass)

#search { 
    margin-top: 1px; 
    display: inline; 
    float: left; 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 220px; 
} 

#search form { 
    position: relative; 
} 

#search input { 
    padding: 0 10px 0 29px; 
    color: #555555; 
    border: none; 
    background: url('/images/bg_searchbar.png?1296191141') no-repeat; 
    width: 180px; 
    height: 29px; 
    overflow: hidden; 
} 

#search input:hover { 
    color: #00ccff; 
    background-position: 0px -32px; 
} 

Y aquí está la simple html:

<div id="search"> 
    <form> 
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class=""> 
    </form> 
    <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;"> 
    <ul id="search-results" class="dropdown"> 
    </ul> 
    </div> 
</div> 

Bastante simple? el marcador de posición está desactivado por algún motivo, pero cuando intenta escribir en el campo de entrada, el texto está alineado. Parece que solo puedes cambiar el color (para webkit) del marcador de posición, pero si trato de editar el relleno de la entrada que contiene, ¡arruina el diseño de la entrada! saca el pelo

Éstos son Screenies del marcador de posición y el campo de entrada con la entrada de texto:

EDITAR:

Por ahora he recurrido a este jquery plugin .

Funciona desde el primer momento y soluciona el problema de mi Chrome. Todavía me gustaría descubrir cuál es el problema (si tiene algo que ver con MY Chrome o algo así)

Estoy bastante seguro de que no son los estilos ya que John Catterfeld lo reprodujo sin problemas, así que espero alguien por ahí todavía podría indicarme la dirección correcta de por qué me está pasando esto (el cromo de mi cliente también. Así que esto es probablemente originario de Chrome/OSX si John está usando Windows)

Answer 1

Tengo el mismo problema.

Lo arreglé quitando la altura de línea de mi entrada. Compruebe si hay algo de línea que está causando el problema

Answer 2

He creado un violín utilizando su captura de pantalla como imagen de fondo y eliminando el margen adicional, y parece funcionar bien

http://jsfiddle.net/fLdQG/2/ (requiere navegador webkit)

¿Esto funciona para usted? Si no, ¿puedes actualizar el violín con tu marcado exacto y CSS?

Answer 3

Me di cuenta del problema en el momento en que actualicé Chrome en os x a la última versión estable (9.0.597.94) por lo que este es un error de Chrome y con suerte será reparado.

Tengo la tentación de ni siquiera intentar evitar esto y esperar a la solución. Solo significará más trabajo sacándolo.

Answer 4

El marcador de posición no se ve afectado por line-height y padding es inconsistente en los navegadores.

Sin embargo, he encontrado otra solución.

VERTICAL-ALIGN.Esta es probablemente la única vez que funciona, pero intente eso y cave muchas líneas de código CSS.

Answer 5

Eliminar la altura de la línea hace que su texto se alinee con su marcador de posición, pero no resuelve su problema correctamente, ya que necesita adaptar su diseño a este defecto (no es un error). Agregar vertical-alinear tampoco hará el trato. No lo he probado en todos los navegadores, pero no funciona en Safari 5.1.4.

He oído hablar de una solución de jQuery para esto, que no es el soporte marcador de posición entre navegadores (jQuery.placeholder), pero para los marcadores de posición de estilo, pero no he encontrado todavía.

Mientras tanto, puede resolverlo a the table on this page, que muestra el soporte de navegador diferente para diferentes estilos.

Editar: He encontrado el complemento! jquery.placeholder.min.js le ofrece capacidades de diseño completas y compatibilidad con navegadores cruzados.

Answer 6

Si desea mantener su altura de línea y forzar el marcador de posición para tener el mismo, puede editar directamente el código de posición CSS desde las versiones más recientes del navegador. Que hizo el truco para mí:

input::-webkit-input-placeholder { /* WebKit browsers */ 
    line-height: 1.5em; 
} 
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    line-height: 1.5em; 
} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    line-height: 1.5em; 
} 
input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    line-height: 1.5em; 
} 

Answer 7

line-height: normal; 

trabajó para mí;)

Answer 8

que tenía un problema, que aparece justo en el explorador de Internet. Campo de entrada fue diseñado

height:38px; 
line-height:38px; 

Desafortunadamente en IE el marcador de posición inicial no aparece en la posición correcta. Pero cuando hice clic en el campo y luego abandoné este campo, el marcador de posición apareció en la posición correcta.

Mi solución fue establecer:

line-height:normal; 

Answer 9

Quitar line-height o conjunto utilizando relleno ... que está funcionando en todos los navegadores

Answer 10

Configuración line-height: 0px; fijado por mí en Chrome

Answer 11

I tenía un problema similar, mi problema era con el relleno lateral, y la solución era con sangría de texto, no me había dado cuenta de que la sangría de texto afectaba la posición lateral del marcador de posición.

input{ 
    text-indent: 10px; 
} 

Answer 12

he encontrado la respuesta que remedia mis frustraciones con respecto a esto en John Catterfeld's blog.

... Chrome (v20-30) implementa casi todos los estilos, pero con una advertencia importante - los estilos Marcador de posición, sin cambiar el tamaño de la caja de entrada, por lo que mantenerse alejado de cosas como la línea de altura y acolchado superior o inferior.

Si usa altura de línea o relleno, se sentirá frustrado con el marcador de posición resultante. No he encontrado una manera de evitar eso hasta este punto.