HTML5 marcador de posición css relleno
Ya he visto este post e intenté 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. (EDIT : Este es el css generado desde 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 alguna razón, 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 intento editar el relleno de la entrada contenedora, ¡arruina el diseño de la entrada! saca el pelo
Aquí están las pantallas del marcador de posición y el campo de entrada con entrada de texto:
EDITAR :
Por ahora he recurrido a este jquery plugin.
Funciona de inmediato y soluciona el problema de mi Chrome. Todavía me gustaría descubrir cuál es el problema (si tiene algo que ver con MI chrome o algo)
Estoy bastante seguro de que no es los estilos desde John Catterfeld reproducido sin problemas, así que espero que alguien por ahí todavía podría señalarme a la dirección correcta en cuanto a por qué esto me está sucediendo a mí(chrome de mi cliente, así. Así que esto es probablemente nativo de Chrome / OSX si John está usando windows)
12 answers
Tengo el mismo problema.
Lo arreglé eliminando la altura de línea de mi entrada. Compruebe si hay algún lineheight que está causando el problema
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-08 19:20:07
Tuve un problema similar, mi problema fue con el relleno lateral, y la solución fue con, texto-sangría, no me di cuenta de que el efecto de sangría de texto la posición lateral del marcador de posición.
input{
text-indent: 10px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-17 13:41:56
Si desea mantener la altura de la línea y forzar que el marcador de posición tenga la misma, puede editar directamente el CSS del marcador de posición desde las versiones más recientes 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-05 01:51:41
line-height: normal;
Funcionó para mí;)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-04 19:37:44
Tuve un problema, que aparece solo en Internet explorer. El campo de entrada fue estilizado
height:38px;
line-height:38px;
Desafortunadamente en IE el marcador de posición inicial no aparece en la posición correcta. Pero cuando he hecho clic en el campo y luego dejé este campo, el marcador de posición apareció en la posición correcta.
Mi solución fue establecer:
line-height:normal;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-28 10:30:26
Eliminar la altura de línea de hecho hace que el texto se alinee con el texto del marcador de posición, pero no resuelve correctamente el problema, ya que necesita adaptar su diseño a este defecto (no es un error). Agregar vertical-align tampoco hará el trato. No 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 compatible con marcadores de posición entre navegadores (jQuery.marcador de posición), pero para estilizar marcadores de posición, pero no lo he encontrado aun.
Mientras tanto, puede resolver a la tabla en esta página que muestra el soporte de diferentes navegadores para diferentes estilos.
Editar: Encontrado el plugin! jquery.marcador.min.js le proporciona tanto capacidades de estilo completas como soporte entre navegadores.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-19 14:46:39
Ajuste line-height: 0px; arreglado para mí en Chrome
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-05 21:05:18
He creado un violín usando 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)
¿Funciona esto para ti? Si no, ¿puede actualizar el violín con su marcado exacto y CSS?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-07 12:25:29
Me di cuenta del problema en el momento en que actualizé 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 se solucionará.
Estoy tentado de ni siquiera intentar solucionar esto y solo esperar la solución. Sólo significará más trabajo sacándolo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-11 11:04:48
El marcador de posición no se ve afectado por line-height y padding es inconsistente en los navegadores.
He encontrado otra solución sin embargo.
VERTICAL-ALIGN. Esta es probablemente la única vez que funciona, pero inténtelo en su lugar y cave muchas líneas de código CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-02 13:04:45
Eliminar la altura de línea o establecer usando padding...it funciona en todos los navegadores
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-16 08:37:52
Encontré la respuesta que remediaba 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 está utilizando line-height o padding, se sentirá frustrado con el marcador de posición resultante. No he encontrado una manera de evitarlo hasta ahora.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-04 21:41:55