Comment définir la valeur de l'espace réservé à l'aide de CSS ?

Question

Je souhaite définir la valeur de l'espace réservé d'un champ de saisie en utilisant uniquement des feuilles de style en cascade, sans JavaScript ni jQuery.

Comment puis-je le faire ?

Answer 1

Une autre façon d'y parvenir, et je n'ai pas vraiment vu d'autres personnes la proposer comme option, est d'utiliser une ancre comme conteneur autour de votre entrée et de votre étiquette, et de gérer la suppression de l'étiquette via une astuce de couleur, le #hashtag et le css a:visited. (jsfiddle en bas de page)

Votre HTML ressemblerait à 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 ça :

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;
    pointer-events: none;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}

Vous pouvez voir cette solution fonctionner sur jsfiddle. Notez que cette solution ne permet à l'utilisateur de sélectionner le champ qu'une seule fois, avant de supprimer définitivement l'étiquette. Ce n'est peut-être pas la solution que vous souhaitez, mais c'est une solution disponible que je n'ai pas vue mentionnée par d'autres. Si vous voulez expérimenter plusieurs fois, changez simplement votre #hashtag par un nouveau tag "non-visité".

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

Answer 2

D'après ce que j'ai compris, en utilisant,

::-webkit-input-placeholder::before o ::-webkit-input-placeholder::after ,

pour ajouter plus de contenu placeholder ne fonctionne plus. Je pense que c'est une nouvelle mise à jour de Chrome.

C'est vraiment ennuyeux car c'était une bonne solution de contournement, maintenant je suis revenu à ajouter beaucoup d'espaces vides entre les lignes que je veux dans un espace réservé. Par exemple :

<input type="text" value="" id="email1" placeholder="I am on one line.                                              I am on a second line                                                                                     etc etc..." />

Answer 3

J'ai récemment dû faire cela avec la boîte de recherche de Google, c'est un hack extrême réservé aux situations extrêmes (le sélecteur résultant était légèrement différent, mais j'ai réussi à le faire fonctionner dans cet exemple).

/*
 this is just used to calculate the resulting svg data url and need not be included in the final page
*/

var text = placeholder.outerHTML;
 var url = "data:image/svg+xml;,"+text.replace(/id="placeholder"/g," ").replace(/\n|([ ] )/g,"");//.replace(/" /g,"\"");
img.src = url;
result.value = url;
overlay.style.backgroundImage = "url('"+url+"')";

svg,img{
  border: 3px dashed black;
}
textarea{
width:50%;
height:300px;
vertical-align: top;
}
.wrapper{
  position: relative;
  display: inline-block;
}
#overlay{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center left;
}
#my_input:focus + #overlay{
  display: none;
}

As SVG <svg id="placeholder"xmlns="http://www.w3.org/2000/svg"width="235"height="13"><text x="0"y="10"font-family="Verdana"font-size="12" fill ="green">Some New Rad Placeholder</text></svg>
<br>
As IMG <img id="img">
<br>
As Data URI <textarea id="result"></textarea><br>

As "Placeholder" <div class="wrapper">
  <input id="my_input" />
  <div id="overlay">
</div>

Answer 4

cliquez sur le lien pour voir l'espace réservé avec ce code

---

c'est aussi selon cette réponse :

---

input{
              background-image:url("data:image/svg+xml;utf8,<svg \
                                xmlns='http://www.w3.org/2000/svg' \
                                             version='1.1' height='50px' width='120px'>\
                                     <text x='0' y='15' \
                                fill='gray' font-size='15'>Type Email...</text></svg>");
              background-repeat: no-repeat;
           }

---

input:focus{
                  background-image:url("data:image/svg+xml;utf8,<svg \
                                     xmlns='http://www.w3.org/2000/svg' \
                                             version='1.1' height='50px' width='120px'>\
                                          <text x='0'  y='15' \
                                          fill='gray' font-size='15'></text></svg>");
                  background-repeat: no-repeat;
                }

Answer 5

Essayez de l'utiliser :

.input_class:focus::placeholder{
    color: transparent;
}