selectors - title html css

Espacio de almacenamiento CSS css HTML5

Question

Ya he visto esta post y he intentado todo lo posible para cambiar el relleno de mi marcador de posición, pero desafortunadamente parece que no quiere cooperar.

De todos modos, aquí está el código para el css. ( EDITAR : Este es el CSS generado 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 puedes cambiar el color (para el 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

Estas son las pantallas del marcador de posición y el campo de entrada con entrada de texto:

EDITAR :

Por ahora he recurrido a este plugin jquery .

Funciona de la caja 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, así que espero que alguien por ahí todavía pueda orientarme en la dirección correcta de por qué esto me está sucediendo (el cromo de mi cliente también. esto es probablemente nativo de Chrome / OSX si John usa Windows)

Answer 1

Configuración line-height: 0px; lo arreglé para mí en Chrome

Answer 2

Creé un violín con tu captura de pantalla como imagen de fondo y eliminé el margen adicional, y parece funcionar bien

http://jsfiddle.net/fLdQG/2/ (se requiere navegador webkit)

¿Esto funciona para tí? Si no, ¿puedes actualizar el violín con tu marcado exacto y CSS?

Answer 3

El marcador de posición no se ve afectado por line-height y el padding es coherente en los navegadores.

Sin embargo, he encontrado otra solución.

VERTICAL-ALIGN . Esta es probablemente la única vez que funciona, pero intente eso y cave muchas líneas de código CSS.

Answer 4

Eliminar altura de línea o establecer usando relleno ... funciona en todos los navegadores

Answer 5

Eliminar la altura de la línea hace que tu texto se alinee con tu marcador de posición, pero no resuelve tu problema correctamente, ya que necesitas adaptar tu 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.

He oído hablar de una solución jQuery para esto, que no es compatibilidad con marcador de posición entre navegadores (jQuery.placeholder), sino para diseñar 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 soporte de navegador para diferentes estilos.

Editar: encontré el complemento! jquery.placeholder.min.js ofrece capacidades de diseño completas y compatibilidad con navegadores cruzados.

Answer 6

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 mantente alejado de cosas como altura de línea y relleno superior o inferior.

Si usa altura de línea o relleno, se sentirá frustrado con el marcador de posición resultante. No he encontrado una manera de evitar eso hasta este punto.

Answer 7

Me di cuenta del problema en el momento en que actualicé 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 será reparado.

Estoy tentado de no intentar siquiera solucionar este problema y esperar a que se solucione. Solo significará más trabajo sacándolo.

Answer 8

Si desea mantener su altura de línea y forzar el marcador de posición para tener el mismo, puede editar directamente el CSS de 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;
}

Answer 9

Tengo el mismo problema.

Lo arreglé quitando la altura de línea de mi entrada. Comprueba si hay algo de altura que está causando el problema

Answer 10

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 lateral del marcador de posición.

input{
  text-indent: 10px;
}

Answer 11

Tuve un problema, que aparece solo en Internet Explorer. El campo de entrada se diseñó

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;

Answer 12

line-height: normal; 

trabajó para mi ;)