Tengo una imagen como fondo para un campo de entrada. Puedo establecer la altura de la línea y el tamaño de la fuente fácilmente, pero cuando hace clic dentro de la entrada, la línea del cursor está fuera de la imagen de fondo.Tamaño de línea de cursor CSS al ingresar un campo de entrada
¿Existe una declaración de CSS (¿Los llama?) Que controla esto?
Probablemente se esté utilizando line-height para visualizar el texto en la entrada como en vertical centrada. Sin embargo, también es el culpable de su problema. Intente experimentar con la configuración padding de la entrada, mientras deja el line-height configurado en normal.
Sí, altura de línea.
Probar:
input {height: 28px; font-size: 10px; padding: 7px 5px;}
Si lees la pregunta, verás que el OP ya ha establecido el 'line-height' en algo para otros propósitos relacionados con el estilo ... –
La publicación Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS puede ayudarlo.
Parece que el tamaño de su relleno afecta el tamaño y la posición del cursor.
será bueno si tenemos el código, también puede intentar
background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;
depende de su tamaño de las imágenes
problema con el uso de relleno es que se muestra de forma incoherente en diferentes navegadores, mientras line-height en las áreas de texto de entrada se muestran igualmente en IE7, IE8, IE9, Safari, Chrome, Firefox y Opera. Parece que tiene que elegir entre el cursor de entrada o la alineación vertical del texto de entrada.
Experimento el mismo problema de estos efectos variables en todos los navegadores. No tengo una manera de hacerlo perfecto en todos :( – Scott
Usando un line-height: normal o un line-height:inherit hizo el truco de mi lado. Gracias por sus respuestas chicos.
el texto en la etiqueta de entrada se puede centrar verticalmente automáticamente, no use altura de línea en él.
Acabo de jugar con la altura/relleno de la entrada y ponerla en funcionamiento derecho. Solo tenía curiosidad si había algo incorporado en CSS para manejarlo – tmartin314
Ojalá :) Desafortunadamente no. –
¿Qué pasa si tengo el mismo problema para [textarea] (http://stackoverflow.com/questions/17760345/line-height-vs-cursor-height-issue-in-textarea-in-chrome) – imVJ