How to set placeholder value using CSS?

Question

I want to set the placeholder value of an input box using only CSS and no JavaScript or jQuery.

How can I do this?

Heighten

Answer 1

Some type of input hasn't got the :after or :before pseudo-element, so you can use a background-image with a SVG text element:

    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 Something...</text></svg>");
       background-repeat: no-repeat;
    }

    input:focus {
       background-image: none;
    }

My codepen: https://codepen.io/Scario/pen/BaagbeZ

Arsenopyrite

Thanks! That's a very clever way of doing it. – Borowski

This still needs some JS, because when the input loses the focus, the background is shown and it's overlaped with the content. – Fortification

Not sure whether it is well-behaved on other browsers, but at least on recent versions of Chrome, the :placeholder-shown pseudo-class does what @DanielMarín suggests would require JavaScript, provided that the original input has a non-empty placeholder already. input:placeholder-shown shows the background-image only if the existing placeholder would have been visible. – Semiquaver

Answer 2

AFAIK, you can't do it with CSS alone. CSS has content rule but even that can be used to insert content before or after an element using pseudo selectors. You need to resort to javascript for that OR use placeholder attribute if you are using HTML5 as pointed out by @Blender.

Breedlove

Answer 3

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/

Platoon

I have noticed that this does not work in Chrome anymore. Seems like an unsupported feature that no longer works. I used to leverage this technique and can see it no longer applied in my implementations. Has anyone else noticed this? – Amply

Does not wot on Firefox 84.0.2 – Madonna

Firefox is not WebKit based, @Mat – Scanner

Answer 4

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." />

Enarthrosis

the input text box is getting loaded dynamically (google custom search input box). – Heighten

in jQuery: $('#myFieldId').attr('placeholder', 'Search for Stuff'); – Thorrlow

In my case this does not work because I am trying to make a css module with default placeholder values – Terror

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');

Thorrlow

Thats why I wrote "Every css approach is hack-isch anyway" aka "don't do it". But still wanted to provide a way to do it as a site note. – Thorrlow

Answer 6

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/

Chlortetracycline

Answer 7

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..." />

Parietal

Yes, its because chrome stopped using the -WebKit – Terror

Answer 8

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>

Jenks

Answer 9

click on link to see placeholder with this code

---

it also is according to this answer :

---

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

Busybody

Answer 10

Based on those answers and others, here is a way of replacing an existing placeholder by another, while keeping the same behavior (hides on focus, hides when text is inputted).

/* Creates a fake placeholder using a SVG background image with the text we want to display */
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='25' y='20' fill='%23787878' font-size='15'>Rechercher</text></svg>");
  background-repeat: no-repeat;
}

/* Hides our fake placeholder on input focus */
input:focus,
input:not(:placeholder-shown) {
  background-image: none;
}

/* Hides the default placeholder displayed */
input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: transparent;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: transparent;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: transparent;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: transparent;
}

Longsufferance

Please explain downvotes. – Longsufferance

Answer 11

Try use:

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

Veratrine

Close, but this doesn't set the placeholder value as the question asks. Also, providing additional context regarding why & how this answer works and when it should be used will improve its long-term value for readers. – Adachi

Question is not about adding/changing color it is for adding/chaning placeholder value/text – Mammon

Answer 12

Change your meta tag to the one below and use placeholder attribute inside your HTML input tag.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<input type="text" placeholder="Placeholder text" />​

Dahle