CODEWITHSUNDEEP
htmlcssplaceholder
n92
n92

Reputation: 7592

How to set placeholder value using CSS?

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

How can I do this?

Upvotes: 71

Views: 223004

Answers (13)

Sergey Beloglazov
Sergey Beloglazov

Reputation: 160

I have improved the original 5c4r10's anwser. I fixed background showing when the input loses the focus 

input {
  position: relative;
}

::placeholder {
  color: transparent;
}

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:not(:placeholder-shown),
input:focus {
  background-image: none;
}
<input type="text" placeholder="Placeholder"></input>

Modifications

  1. I have replaced browser depended styles *-input-placeholder with one ::placeholder{}
    ::placeholder {
      color: transparent;
    }

See compatibility here

  1. Added backgound-image hiding if the input is not empty with :placeholder-shown
    input:not(:placeholder-shown),
    input:focus {
      background-image: none;
    }

See compatibility here

Upvotes: 0

5c4r10
5c4r10

Reputation: 229

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

Upvotes: 21

Charles
Charles

Reputation: 11758

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/

Upvotes: 18

Vadorequest
Vadorequest

Reputation: 17999

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

Upvotes: -1

Staffel023
Staffel023

Reputation: 1

Try use:

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

Upvotes: -2

user16736500
user16736500

Reputation:

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

Upvotes: 0

NinjaKC
NinjaKC

Reputation: 841

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/

Upvotes: 5

Susy
Susy

Reputation: 1

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

Upvotes: -5

Isaac
Isaac

Reputation: 11805

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>

Upvotes: 0

Hafenkranich
Hafenkranich

Reputation: 1744

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

Upvotes: 8

Filippo Sotto Mayor Matoso
Filippo Sotto Mayor Matoso

Reputation: 41

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

Upvotes: 4

Sarfraz
Sarfraz

Reputation: 382616

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.

Upvotes: 17

Blender
Blender

Reputation: 298076

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

Upvotes: 12

Related Questions