70

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

How can I do this?

0

12 Answers 12

20

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

3
  • Thanks! That's a very clever way of doing it.
    – clayRay
    Commented Jan 15, 2021 at 3:06
  • 3
    This still needs some JS, because when the input loses the focus, the background is shown and it's overlaped with the content. Commented Mar 7, 2022 at 13:25
  • 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.
    – Dave Land
    Commented Mar 22, 2022 at 20:26
18

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/

3
  • 30
    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?
    – Rob R
    Commented Mar 31, 2016 at 21:53
  • 1
    Does not wot on Firefox 84.0.2 Commented Apr 11, 2021 at 15:06
  • 3
    Firefox is not WebKit based, @Mat Commented Apr 22, 2021 at 15:52
17

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.

12

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." />
3
  • the input text box is getting loaded dynamically (google custom search input box).
    – n92
    Commented Dec 11, 2011 at 6:10
  • 13
    in jQuery: $('#myFieldId').attr('placeholder', 'Search for Stuff'); Commented Sep 20, 2016 at 11:44
  • In my case this does not work because I am trying to make a css module with default placeholder values
    – Hg0428
    Commented Oct 10, 2021 at 1:25
7

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

1
  • 1
    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. Commented Oct 6, 2018 at 16:34
5

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/

0
4

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..." />
1
  • Yes, its because chrome stopped using the -WebKit
    – Hg0428
    Commented Oct 10, 2021 at 1:22
0

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>

0

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

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;
}
1
  • Please explain downvotes. Commented Jun 28, 2023 at 5:16
-2

Try use:

.input_class:focus::placeholder{
    color: transparent;
}
2
  • 2
    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.
    – outis
    Commented Feb 4, 2022 at 10:53
  • Question is not about adding/changing color it is for adding/chaning placeholder value/text Commented Oct 10, 2023 at 12:19
-5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.