Relleno CSS de marcador de posición HTML5

Ya vi esta publicación y probé todo lo que pude para cambiar el relleno de mi marcador de posición, pero por desgracia, parece que simplemente 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á el html simple:

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

Aquí hay capturas de pantalla del marcador de posición y el campo de entrada con entrada de texto:

EDITAR :

Por ahora he recurrido a este complemento jquery .

Funciona directamente 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, por lo que espero que alguien todavía pueda señalarme la dirección correcta de por qué esto me está pasando (el cromo de mi cliente también. esto probablemente sea nativo de Chrome / OSX si John usa Windows)

Tengo el mismo problema.

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

Tuve un problema similar, mi problema fue con el relleno lateral, y la solución fue, con sangría de texto, no me di cuenta de que la sangría de texto afecta la posición del marcador de posición.

input{
  text-indent: 10px;
}

Si desea mantener su altura de línea y forzar al marcador de posición a tener el mismo, puede editar directamente el CSS del marcador de posición desde las versiones más nuevas del navegador. Eso 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;
}

line-height: normal; 

trabajó para mi ;)

La eliminación de la altura de la línea hace que su texto se alinee con su texto de marcador de posición, pero no resuelve adecuadamente su problema 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 con seguridad.

He oído hablar de una solución de jQuery para esto, que no es el soporte de marcador de posición para varios navegadores (jQuery.placeholder), sino para el diseño de marcadores de posición, pero aún no lo he encontrado.

Mientras tanto, puede resolver la tabla de esta página que muestra diferentes tipos de compatibilidad con el navegador para diferentes estilos.

Editar: ¡Encontré el complemento! jquery.placeholder.min.js le brinda capacidades completas de diseño y compatibilidad con varios navegadores.

Tuve un problema, que aparece solo en Internet Explorer. El 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;

La configuración line-height: 0px;me lo arregló en Chrome

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

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

¿Esto funciona para tí? Si no, ¿puede actualizar el violín con su marcado exacto y CSS?

Noté el problema en el momento en que actualicé Chrome en os x a la última versión estable (9.0.597.94), así que este es un error de Chrome y espero que se solucione.

Estoy tentado a ni siquiera intentar evitar esto y solo esperar la solución. Solo significará más trabajo sacarlo.

El marcador de posición no se ve afectado line-heighty paddinges 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 cuele muchas líneas de código CSS.

Elimine la altura de línea o establezca con relleno ... está funcionando en todos los navegadores

Encontré la respuesta que solucionó mis frustraciones con respecto a esto en el blog de John Catterfeld .

... Chrome (v20-30) implementa casi todos los estilos, pero con una advertencia importante: los estilos de marcador de posición no cambian el tamaño del cuadro de entrada, así que manténgase alejado de cosas como la altura de la línea y el relleno superior o inferior.

Si usa altura de línea o relleno, se sentirá frustrado con el marcador de posición resultante. Hasta ahora no he encontrado una forma de evitarlo.

Si desea mover el texto del marcador de posición hacia la derecha y dejar el cursor en el espacio en blanco, debe agregar espacios al comienzo del atributo del marcador de posición:

<input type="email" placeholder="  Your email" />

He probado casi todos los métodos dados aquí en esta página para mi aplicación Angular. Solo encontré la solución a través de  que inserta espacios, es decir

Material angular

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

Material no angular

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>