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)
fuente
Respuestas:
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.
fuente
line-height: normal;fue el truco para mí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.
fuente
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í:
fuente
trabajó para mi ;)
fuente
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.
fuente
Tuve un problema, que aparece solo en Internet Explorer. El campo de entrada fue diseñado
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:
fuente
La configuración
line-height: 0px;me lo arregló en Chromefuente
line-heightatributo por completo del elemento. Para mí que no hicieron nada, y lo que fija el problema para mí era conjuntoline-height: 0pxHe 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?
fuente
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.
fuente
El marcador de posición no se ve afectado
line-heightypaddinges 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.fuente
Elimine la altura de línea o establezca con relleno ... está funcionando en todos los navegadores
fuente
Encontré la respuesta que solucionó mis frustraciones con respecto a esto en el blog de John Catterfeld .
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.
fuente
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:
fuente
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 decirMaterial angular
Material no angular
fuente