How to set placeholder value using CSS?

Question

I want to set the placeholder value of an input box using only css and not JavaScript or jQuery. How can I do this?

Answer 1

As @Sarfraz already mentioned CSS, I'll just add HTML5 to the mix.

You can use the HTML5 placeholder attribute:

<input type="text" placeholder="Placeholder text blah blah." />

Answer 2

Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)

Your HTML would look like this:

<a id="Trickory" href="#OnlyHappensOnce">
    <input type="text" value="" id="email1" class="inputfield_ui" />
    <label>Email address 1</label>
</a>

And your CSS, something like this:

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

You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.

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

Answer 3

From what I understand using,

::-webkit-input-placeholder::beforeor ::-webkit-input-placeholder::after,

to add more placeholder content doesn't work anymore. Think its a new Chrome update.

Really annoying as it was a great workaround, now im back to just adding lots of empty spaces between lines that I want in a placeholder. eg:

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

Answer 4

I recently had to do this with google's search box, this is an extreme hack reserved for extreme situations (the resulting selector was slightly different, but I made it work in this example)

/*
 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 5

If the content is loaded via ajax anyway, use javascript to manipulate the placeholder. Every css approach is hack-isch anyway. E.g. with jQuery: $('#myFieldId').attr('placeholder', 'Search for Stuff');

Answer 6

You can do this for webkit:

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

http://jsfiddle.net/Z3tFG/1/