Espace réservé d'entrée à l'aide de CSS

Je sais qu'il ya beaucoup de questions à propos de cette requête ici, mais aucun d'eux de fournir la solution pour moi.

HTML

<input id="tb1" type="text" class="note" />

<br>

<p class="note1"> This is not done.</p>

CSS

p.note1:before{
    content: "Note:";
}

tb1.note:before{
    content: "Enter your number";
}

Je suis en train d'essayer avec le code ci-dessus et de la variation que l'on trouve sur le web mais aucune ne semble fonctionner pour la balise input. Il travaille pour p balise.

EDIT: je ne peux pas ajouter de la valeur de l'attribut de balise d'entrée et de gérer les css pour le résultat souhaité. C'est la limite du système.

EDIT2: Oublier mon css, est-il possible que le texte de l'espace réservé est possible sans l'aide de l'espace réservé attribut et juste avec du css pour input type="text"

Quel est le problème avec l'aide de placeholder="text here"
ne pouvez pas ajouter en raison des limitations du système...
Qu'est-ce que la limitation de l'utilisation de HTML?
:before ne fonctionne que sur les éléments qui peuvent avoir des nœuds enfants, aussi des entrées n'avez pas de balise de fermeture
html est affichée à partir existant cadre de contrôles et je n'ai pas de commande à demander/changer cela.

OriginalL'auteur Akki619 | 2013-08-20

1

Il ne fonctionne pas pour le simple fait que cela:
```
<input id="tb1" type="text" class="note"></input>
```
n'est pas valide. <input /> éléments ne sont pas des conteneurs. Comme la spécification des notes, endtags sont interdits (et essentiellement ignoré par le navigateur): http://www.w3.org/TR/html401/interact/forms.html#h-17.4

J'ai eu cette pièce alors comment il va être possible de rendre le texte d'espace réservé sur mon champ de saisie avec css.
Je suis 99.9999999% certain que ce que vous voulez n'est pas possible avec les CSS.

OriginalL'auteur Tieson T.
8

:avant crée un pseudo-élément qui est le premier enfant de l'élément de correspondance.

L'élément sélectionné DOIT être une balise conteneur. Une balise vide comme <input> n'ont pas d'enfants de l'élément.

Si vous ne pouvez pas modifier votre code HTML manuellement, vous pouvez toujours qu'en utilisant JavaScript:
```
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
```
Mise à jour

Si vous souhaitez obtenir à l'aide de CSS, vous devez avoir un élément de conteneur d'emballage de votre <input> (ou à venir).

MAIS Il ne fonctionne pas correctement comme placeholder faire. Vous ne serez pas en mesure de vérifier la valeur de <input> par les CSS. Si vous écrivez quelque chose à l'intérieur de la <input>, après blur événement, à la génération de l'espace réservé sera affiché sur le <input> de nouveau.

HTML:
```
<label>
    <input id="tb1" type="text" class="note">
</label>
```
CSS:
```
label {
  position: relative;
}

label:after {
  content: 'Enter your number';
  position: absolute;
  left: 5px;
  top: 0;
  color: #bbb;
}

#tb1 {
  position: relative;
}

#tb1:focus {
  z-index: 10;
}
```
JSBin Démo

Merci pour votre réponse, mais il doit être fait à l'aide de css...est-il possible de tirer parti de css pour cette question.
Cela dépend de votre balisage HTML, vous devez avoir un élément de conteneur comme <label>. Vérifier ma mise à jour.
Je l'aime, cependant, quand tb1 perd le focus, l'espace réservé est de retour, même si vous avez mis un texte.

OriginalL'auteur Hashem Qolami
1

J'ai trouvé cette méthode, mais non pris en charge par tous les navigateurs:
```
#tb1.note:empty:before{
    content: "Enter your number";
}
```
Remarque: vous avez oublié de placer un sélecteur d'id # tb1.note

voir ce lien

OriginalL'auteur Bhojendra Rauniyar
1

EDIT:

Essayez ceci pour commencer: (Remarque: vous allez avoir besoin de js pour détecter si le texte a été saisi dans l'entrée)

En dehors de cela - je ne crois pas que cela, il ya un css solution pour l'espace réservé de texte sur un élément de saisie sans l'aide de l'attribut placeholder.

VIOLON

Balisage
```
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
```
css
```
.container
{
    position: relative;
}
input
{
    background: transparent;
}
input:focus + .fakePlaceholder
{
    display: none;
}
.fakePlaceholder
{
    color:gray;
    position:absolute;
    top: 3px;
    left: 5px;
    z-index: -1;
}
```
Vous ne pouvez pas utiliser les éléments pseudo sur un input tag - ou de toute autre non-conteneur d'éléments pour que la matière

De la Pseudo-Éléments tag info:

vous ne pouvez pas les utiliser (pseudo-éléments) avec remplacée éléments (voir
ci-dessous) qui n'ont pas de contenu réel. C'est parce que l'généré
contenu réside dans l'élément.

...

Remplacé Éléments

Tout élément dont l'apparence et/ou les dimensions sont déterminées par certains
ressource externe est considéré comme un élément remplacé. Certains
pseudo-éléments ne peuvent pas être appliquées à remplacer les éléments parce qu'ils
n'ont pas de "contenu" ou remplacé par quelque chose (comme d'utilisateur
les contrôles de l'interface). Remplacé éléments incluent des images (<img>), inline
les cadres (<iframe>), les sauts de ligne (<br>), les règles horizontales (<hr>),
plugins (<object>), les éléments de formulaire (<button>, <textarea>, <input>, et
<select>), des vidéos (<video>), des sons (<audio>), et les toiles
(<canvas>). Un autre élément est considéré comme un non-remplacé
élément.

veuillez voir mon edit2.

OriginalL'auteur Danield
1

Une autre façon, cela peut être accompli, et n'ont pas vraiment vu de toutes les autres, donnez-lui comme d'une option est d'utiliser à la place un point d'ancrage comme un conteneur autour de vos commentaires et de votre étiquette, et s'occuper de l'enlèvement de l'étiquette par un peu de couleur trickory, le #hashtag, et le css a:visited. (jsfiddle en bas)

Votre code devrait ressembler à ceci:
```
<a id="Trickory" href="#OnlyHappensOnce">
    <input type="text" value="" id="email1" class="inputfield_ui" />
    <label>Email address 1</label>
</a>
```
Et votre CSS, quelque chose comme ceci:
```
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */

a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */

a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */

a#Trickory input {
    width:95%;
    z-index:3;
    position:relative;
    background-color:transparent;
}
a#Trickory label {
    position:absolute;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}
```
Vous pouvez voir le travail sur à jsfiddle, notez que cette solution ne permet à l'utilisateur de sélectionner le champ à la fois, avant qu'il supprime l'étiquette pour de bon. Peut-être pas la solution que vous voulez, mais certainement l'une des solutions que je n'ai pas vu d'autres mentionnent. Si vous voulez expérimenter plusieurs fois, il suffit de changer votre #hashtag pour un nouveau "non visité" tag.

http://jsfiddle.net/childerskc/M6R7K/

OriginalL'auteur NinjaKC
0

Si vous ne pouvez pas manipuler le code html et l'utilisation placeholder="". Utiliser javascript pour manipuler l'espace réservé. Chaque css approche est hack-isch de toute façon.
E. g. avec jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');

OriginalL'auteur Hafenkranich

Vous devez vous connecter pour publier un commentaire.

Mise à jour

Balisage

css