Texto de marcador de posición en un campo de entrada con CSS solamente (sin JavaScript)

Question

En lugar de etiquetar cada campo de una forma, a veces es preferible (desde el punto de vista del diseño) tener texto de marcador de posición en cada campo. Por ejemplo, en lugar de tener presente:

   ---------------------------------- 
Full Name: |         | 
      ---------------------------------- 

que tiene esto:

---------------------------------- 
| Full Name      | 
---------------------------------- 

El cuando se hace clic en el campo, el texto desaparece y se puede escribir lo que quieras. Si se salta el campo sin ingresar ningún texto, el marcador de posición vuelve a aparecer.

He visto esto hecho de muchas maneras, pero todos los métodos implican JavaScript. Por ejemplo, Twitter hace un trabajo decente en su signup page, pero si Javascript está deshabilitado, terminas escribiendo tu nombre sobre la palabra 'Nombre completo'.

Estoy buscando un método de solo CSS que funcionaría incluso con JavaScript deshabilitado. La única solución potencial que se me ocurre es establecer el fondo de la etiqueta <input> en una imagen del texto deseado y luego usar la pseudoclase input:focus para borrar la imagen de fondo cuando alguien hace clic en el cuadro de texto. Esto parece funcionar, pero sería bueno no tener que usar imágenes.

¿Alguien sabe de un buen recurso sobre cómo hacer esto?

Answer 1

Este es el método preferido, y funciona en todos los navegadores actuales:

<input type="text" name="" placeholder="Full Name"/> 

Esta versión funciona para IE9 y antes:

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/> 

Answer 2

Puede hacer esto con un <label> colocado detrás del índice usando z-index y un background-color transparente en el <input>. Use :focus para cambiar a un fondo blanco.

:first-line tiene algunos problemas con Firefox.

Demostración: http://jsfiddle.net/ThinkingStiff/bvJ43/

Nota: Véase el comentario de código-sushi a continuación para cuestiones de desenfoque: Placeholder text in an input field with CSS only (no JavaScript)

Salida:

HTML:

<label class="input">enter name<input /><label>​ 

CSS:

.input { 
    color: gray; 
    display: block; 
    font-size: small; 
    padding-top: 3px; 
    position: relative; 
    text-indent: 5px; 
} 

input { 
    background-color: transparent; 
    left: 0; 
    position: absolute; 
    top: 0; 
    z-index: 1; 
} 

input:focus, input:first-line { 
    background-color: white; 
} 

Answer 3

Trate this: los que resuelve los casos de marcador de posición y multi-entrada desbordantes. El truco es mover las etiquetas detrás de sus entradas y reordenarlas visualmente.

No necesita un div adicional para lograr lo que desea.

Answer 4

Prueba esto:

HTML

<div> 
    <input type="text" id="text"></input> 
    <label for="text">required</label> 
</div> 

CSS

.text-wrapper { 
    position: relative; 
} 
.text-input-label { 
    position: absolute; 
    /* left and right properties are based on margin, border, outline and padding of the input text field */ 
    left: 5px; 
    top: 3px; 
    color: #D1D1D1; 
} 
#text:focus + label { 
    display: none; 
} 

Working Fiddle

Answer 5

Todas las respuestas presumiblemente CSS-sólo por encima han descuidado un componente crítico que se requiere con el fin de evitar que la etiqueta actúa como un pseudo-marcador de posición de "sangrado a través de "una vez que el usuario ya no se centra en ese campo en particular.

Pista:

input:valid { background-color:white; } 

La pseudo clase :valid obtiene cada vez que un campo tiene cualquier valor distinto de ''. Por lo tanto, cuando el usuario introduce algo en el campo que le pertenece, la etiqueta que se muestra allí dejará de mostrarse.

Tenga en cuenta que <input type="email" /> campos, la pseudo-clase :valid hace y realmente requerirá la entrada de un formato de correo electrónico válido (por ejemplo, "xxxx@xxx.com" - o .net o .org, etc.).

Las instrucciones completas de cómo hacer esto aquí: http://css-tricks.com/float-labels-css/