html - change - input type search bootstrap
Problema de posición del cursor de entrada HTML en Chrome cuando el valor está vacío (8)
Porque:
Parece que esto es un error de regresión en el motor Chromium 38. Puedo reproducir en Chrome 38. * y Opera 25. * (que usa Chromium 38).
Errores reportados:
Como señala @JackieChiles, parece ser una regresión de este error [cerrado como obselete]: code.google.com/p/chromium/issues/detail?id=47284
Como se sugirió en el error cerrado, he registrado uno nuevo. https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535
Y también se ha hecho referencia a otro error reportado que parece resaltar el mismo error, pero falla al definir el problema exacto de una manera genérica. https://code.google.com/p/chromium/issues/detail?id=394664
Solución:
Como se detalla en otras respuestas anteriores, la solución consiste en evitar el uso de un atributo de line-height basado en píxeles. Por ejemplo, cambiar line-height:50px a line-height:1em o line-height:100% generará un comportamiento más esperado.
Recientemente me di cuenta de que las entradas de texto tienen un problema de visualización en Google Chrome, pero solo cuando el texto está vacío.
Observe cómo en la imagen superior, cuando la entrada está vacía, el cursor es demasiado alto dentro de la entrada de texto.
Pero una vez que escribimos un texto, se corrige a sí mismo:
JSFiddle para ilustrar. Puede requerir la versión de Google Chrome: 38.0.2125.101 m
HTML:
<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
margin: 0;
line-height: 46px;
">
CSS:
input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}
Agregar line-height:100% parece solucionar el problema para nosotros:
Cambiar el estilo CSS en la entrada de texto desde line-height: 46px de line-height: 46px a line-height: 1em resuelve el problema; sin embargo, no estoy seguro de por qué.
En 2012, hice una aplicación web de lona HTML5 y usé una propiedad CSS3 para cambiar la posición del cursor cuando uso una imagen como cursor:
#canvas { cursor: url(../image/pen_red_ff0000.gif)0 20, auto; }
Funcionó durante meses al desarrollar mi proyecto en Firefox, Chrome / Chromium y otros navegadores pero, al menos desde Chrome 38, se ignoró el cambio de posición del cursor. Estoy usando la versión de Chromium Ubuntu y hoy, he actualizado a Chromium 40 y el error todavía está aquí incluso después de reiniciar y eliminar ".config / chromium".
La versión de los paquetes de Ubuntu es "Versión 40.0.2214.94 Ubuntu 14.04 (64-bit)" pero hace unos días probé el último Chromium Linux oficial "Versión 42.0.2287.0 (64-bit)" de https://download-chromium.appspot.com/ y el error no apareció.
Mi aplicación web está aquí http://drawcode.eu/projects/connect-points/ , tienes que conectar puntos, pero en Chromium de Ubuntu, tengo que hacer clic en 20 píxeles debajo de la mitad de los puntos. Es un problema de posición del cursor, así que creo que mi problema está relacionado con este hilo.
¿Alguien puede confirmar que tiene el error y saber cuándo está realmente solucionado? Tenga en cuenta que el último Chromium oficial que he descargado es la versión 42 (no estable). Mi Chromium 40 de Ubuntu todavía tiene el error, pero @Salmonface dijo que se corrigió en la versión 40 HTML Problema de posición del cursor de entrada en Chrome cuando el valor está vacío
Editar: ¡En Debian, tuve este error con Chromium 37 (no 38) también! El error todavía está aquí en Chrome beta (versión 41). Aquí hay un Fiddle http://jsfiddle.net/baptx/L0fmvs7a/
Editar 2: De hecho, el error de posición del cursor CSS3 apareció en Chromium 25 ( https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/171003/ ) y parece estar corregido en Chromium 42 ( https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/313000/ ), puede probar usted mismo mi aplicación de canvas HTML5 y ver que la posición del cursor CSS3 es incorrecta. Desde Chromium 25 hasta Chromium 36 (probado con el desarrollador build 261001), el Fiddle I shared funciona pero el navegador te permite seleccionar texto en un div con una posición buena o incorrecta del cursor. Desde Chromium 37 (probado con el desarrollador build 271001) hasta Chromium 41, no puedes seleccionar texto con la posición correcta del cursor en el Fiddle.
El error no es solo la plataforma GNU / Linux, sino que también aparece en una máquina virtual con Windows 8.
Encontré el problema similar. Pero descubrí que es mejor usar el número para line-height de line-height lugar de la longitud (px, em o rem). Tal vez con el siguiente código corrija este problema:
input[type="text"] {
height: 46px;
line-height: 1.1;
}
Además, tal vez el css anterior deba emparejarse con -webkit-appaearance: none para el efecto de representación deseado. De todos modos, esto funciona para mí.
Hay otro hack que nadie ha mencionado como puedo ver. Puede usar una consulta de @media para verificar Chrome:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
line-height: normal;
}
Tuve el mismo problema esos días, pero solo en iOS 8.1, así que tal vez mi solución ayude a alguien. El problema vino de una etiqueta div que había establecido una propiedad CSS de transformación. Resuelvo el problema con el siguiente código:
#your-parent-div {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
}
sugiero que no use line-height en absoluto, puede que no sea la respuesta correcta, pero está funcionando para mí (última versión de Chrome)
Fiddle actualizado http://jsfiddle.net/efgq1svz/11/