Texte d'espace réservé dans un champ de saisie avec CSS uniquement (pas de JavaScript)

À la place de l'étiquetage de chaque champ dans un formulaire, il est parfois préférable (à partir d'un point de vue design) pour avoir de l'espace réservé de texte dans chaque champ. Par exemple, au lieu d'avoir ceci:

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

vous avez ceci:

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

Le lorsque vous cliquez dans le champ, le texte disparaît et vous pouvez écrire ce que vous voulez. Si vous passez sur le champ sans entrer n'importe quel texte, puis l'espace réservé réapparaît.

J'ai vu que cela fait de nombreuses façons, mais toutes les méthodes impliquent JavaScript. Par exemple, Twitter fait un travail décent sur leur la page d'inscription mais si Javascript est désactivé, en fin de taper votre nom sur le mot 'nom Complet'.

Je suis à la recherche d'un CSS seule méthode qui fonctionne même avec JavaScript désactivé. La seule solution que j'ai trouvé est de définir l'arrière-plan de la <input> étiquette à une image du texte de votre choix, puis utilisez la input:focus pseudo-classe pour effacer l'image de fond lorsque quelqu'un clique sur la zone de texte. Cela semble fonctionner, mais il serait agréable de ne pas avoir à utiliser des images.

Personne ne sait d'une bonne ressource sur comment faire cela?

source d'informationauteur David Jones

  1. 29

    C'est la méthode préférée, et fonctionne dans tous les navigateurs actuels:

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

    Cette version fonctionne pour IE9 et avant:

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

    Vous pouvez le faire avec un <label> placé derrière l'index à l'aide z-index et transparent background-color sur le <input>. Utilisation :focus pour changer un fond blanc.

    :first-line a quelques Firefox questions.

    Démo: http://jsfiddle.net/ThinkingStiff/bvJ43/

    Remarque: Voir le code-sushi de commentaire ci-dessous pour le flou des questions: Texte de l'espace réservé dans un champ de saisie avec CSS (sans JavaScript)

    De sortie:

    Texte d'espace réservé dans un champ de saisie avec CSS uniquement (pas de JavaScript)

    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;
}
  3. 1

    Essayez ceci:

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

    Travail Violon

  4. 0

    Tous les de la sans doute CSS-seulement les réponses ci-dessus ont négligé un élément essentiel qui est nécessaire pour empêcher l'étiquette agissant comme un pseudo-espace réservé de "hémorragie à travers" une fois que l'utilisateur n'est plus axé sur le domaine particulier.

    Astuce:

    input:valid { background-color:white; }

    La pseudo-classe :valid obtient à chaque fois qu'un champ a une valeur autre que ''. Ainsi, lorsque votre utilisateur entre quelque chose dans le champ de son propre chef, l'étiquette affichée il y aura cesser d'être affiché.

    Être conseillé avec <input type="email" /> champs, la pseudo-classe :valid fait et effectivement exiger la saisie d'une adresse email valide format (par exemple, "[email protected]" - ou .net ou .org, etc.).

    Plein instructions comment faire ici: http://css-tricks.com/float-labels-css/

  5. 0

    Essayer cette: il résout le débordement de l'espace réservé et multi-cas d'entrée. L'astuce est de déplacer les étiquettes derrière leurs contributions et de les réorganiser visuellement.

    Vous n'avez pas besoin d'un supplément de div pour obtenir ce que vous voulez.