web-dev-qa-db-fra.com

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

Au lieu d'étiqueter chaque champ d'un formulaire, il est parfois préférable (du point de vue de la conception) d'avoir un texte d'espace réservé dans chaque champ. Par exemple, au lieu d'avoir ceci:

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

tu as ceci:

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

Lorsque vous cliquez dans le champ, le texte disparaît et vous pouvez écrire ce que vous voulez. Si vous sautez le champ sans entrer de texte, l'espace réservé réapparaît.

J'ai vu cela de plusieurs façons, mais toutes les méthodes impliquent JavaScript. Par exemple, Twitter fait un travail décent sur leur page d'inscription mais si Javascript est désactivé, vous finissez par taper votre nom sur le mot 'Nom complet'.

Je cherche une méthode CSS uniquement qui fonctionnerait même avec JavaScript désactivé. La seule solution potentielle que j'ai trouvée consiste à définir l'arrière-plan du <input> tag vers une image du texte souhaité, puis utilisez le input:focus pseudo-classe pour effacer l'image d'arrière-plan lorsque quelqu'un clique sur la zone de texte. Cela semble fonctionner mais ce serait bien de ne pas avoir à utiliser d'images.

Quelqu'un connaît-il une bonne ressource sur la façon de procéder?

htmlcssplaceholder
10
David Jones

Ceci 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'"/>
31
Jay

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

:first-line a quelques problèmes avec Firefox.

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

Remarque: Voir le commentaire de code-sushi ci-dessous pour les problèmes de flou: Texte d'espace réservé dans un champ de saisie avec CSS uniquement (pas de JavaScript)

Production:

enter image description here

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

Essaye ça:

[~ # ~] 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;
}

Violon de travail

1
Mr_Green

Essayez this : il résout l'espace réservé débordant et les cas à entrées multiples. L'astuce consiste à déplacer les étiquettes derrière leurs entrées et à les réorganiser visuellement.

Vous n'avez pas besoin d'un div supplémentaire pour réaliser ce que vous voulez.

0
Knu

Toutes les réponses sans doute CSS uniquement ci-dessus ont négligé un composant critique qui est nécessaire afin d'empêcher l'étiquette agissant comme un pseudo-espace réservé de "saigner" une fois que l'utilisateur n'est plus concentré sur ce domaine particulier.

Allusion:

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 quoi que ce soit dans le champ qui lui est propre, l'étiquette qui y est affichée cesse de s'afficher.

Soyez conseillé avec <input type="email" /> champs, la pseudo-classe :valid nécessite et exigera en fait la saisie d'un format de courrier électronique valide (par exemple, "[email protected]" - ou .net ou .org, etc.).

Des instructions complètes sur la façon de le faire ici: http://css-tricks.com/float-labels-css/

0
code-sushi