Relleno CSS de marcador de posición HTML5


133

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:

marcador de posición 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)


2
¿Puedes proporcionar el CSS generado? Sería mucho más fácil trabajar con él que con la fuente SASS.
RoToRa

+1 Ese complemento es increíble, simple y tiene las opciones que necesito. Probablemente la mejor solución de marcador de posición con la que me topé hasta ahora.
easwee

Si alguien tiene un problema con la configuración de arranque, estas dos opciones ayudan: font-size: large; en lugar de px; y altura de línea: normal;
necker

Respuestas:


229

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.


66
Incorrecto. Con un elemento de entrada, el marcador de posición no se ve afectado por la altura de la línea, pero el relleno no es la mejor solución. Lo mejor es usar (y sé que normalmente nunca hace nada, pero en este caso lo hace) la propiedad CSS VERTICAL-ALIGN.
RIK

1
Sí, sorprendentemente, eso solucionó el problema. Y el texto escrito aún permanece centrado verticalmente incluso sin la ayuda de altura de línea.
hndcrftd

59
cuando no había altura de línea en la entrada directamente, luego agregar line-height: normal;fue el truco para mí
philfreo

De todos modos, debe agregar altura de línea para, por ejemplo, navegadores, pero eso hace el trabajo para un safari
Kaloyan Stamatov

95

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;
}

28

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;
}


2

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.


estaba tratando de encontrar una solución que no sea de marcador de posición, ya que ya usé el complemento jquery anterior :) ¡gracias por la ayuda!
corroído el

Sin embargo, tenga en cuenta que estos son dos complementos diferentes. No estoy seguro de qué hace el que está utilizando (la demostración no funciona en ninguno de mis navegadores), pero este utiliza el atributo de marcador de posición del elemento y crea dinámicamente un espacio representado sobre el campo de entrada, que Proporciona las máximas posibilidades de diseño.
zykadelic

2

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;

2

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


2
¿Puede explicar lo que esto agrega a la respuesta aceptada de hace cuatro años?
Nathan Tuggy

1
@NathanTuggy para mí, la respuesta aceptada sugirió que elimine el line-heightatributo por completo del elemento. Para mí que no hicieron nada, y lo que fija el problema para mí era conjuntoline-height: 0px
JobJob

Lo mismo aquí, esto es lo que realmente solucionó el problema para mí.
aeroson

1

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?


hmm, revisé el enlace y no funciona para mí también. ¿crees que hay un complemento / algo en mi Chrome que lo está causando? captura de pantalla: grab.by/8OFf
corroído

lo comprobé usando safari y funciona. ¿No deberían Chrome y Safari representar lo mismo?
corroído

Hmm, no conozco un complemento que afecte su diseño de esta manera, pero Chrome y Safari funcionan bien para mí (y sí, deberían representar lo mismo).
ajcw

1
Estoy usando 9.0.597.84 (Chrome) en Mac. cual estas usando
corroído

Estoy usando Chrome 8.0.552.237 en Windows 7.
ajcw

1

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.


mmm, ¿entonces se confirma? ¿hay alguna manera de "degradar" nuestro cromo para verificar si realmente es cromo?
corroído

1
es 2013 y todavía tengo este problema en la última versión de Chrome: Versión 27.0.1453.116 m
Postscripter

1

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.


2
no hace nada por mi
Postscripter

1

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


1

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.


1

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" />

1

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 &nbsp;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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.