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

User · Answer

Some type of input hasn t got the  after or  before pseudo-element  so you can use a background-image with an SVG text element       input          background-image url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  version  1 1  height  50px  width  120px  gt  lt text x  0  y  15  fill  gray  font-size  15  gt Type Something    lt  text gt  lt  svg gt            background-repeat  no-repeat             input focus          background-image  none          My codepen  https   codepen io Scario pen BaagbeZ

User · Answer

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

User · Answer

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    lt a id  Trickory  href   OnlyHappensOnce  gt       lt input type  text  value    id  email1  class  inputfield ui    gt       lt label gt Email address 1 lt  label gt   lt  a gt    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

User · Answer

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

User · Answer

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

User · Answer

As  Sarfraz already mentioned CSS  I ll just add HTML5 to the mix   You can use the HTML5 placeholder attribute    lt input type  text  placeholder  Placeholder text blah blah     gt

User · Answer

Change your meta tag to the one below and use placeholder attribute inside your HTML input tag    x000D   x000D   lt meta http-equiv  X-UA-Compatible  content  IE edge    gt  x000D   lt input type  text  placeholder  Placeholder text    gt   x000D   x000D   x000D

User · Answer

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    lt input type  text  value    id  email1  placeholder  I am on one line                                               I am on a second line                                                                                     etc etc       gt

User · Answer

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    x000D   x000D     x000D   this is just used to calculate the resulting svg data url and need not be included in the final page x000D     x000D   x000D  var text   placeholder outerHTML  x000D   var url    data image svg xml    text replace  id  placeholder  g      replace   n        g        replace     g        x000D  img src   url  x000D  result value   url  x000D  overlay style backgroundImage    url    url       x000D  svg img  x000D    border  3px dashed black  x000D    x000D  textarea  x000D  width 50   x000D  height 300px  x000D  vertical-align  top  x000D    x000D   wrapper  x000D    position  relative  x000D    display  inline-block  x000D    x000D   overlay  x000D    position absolute  x000D    left 0  x000D    top 0  x000D    right 0  x000D    bottom 0  x000D    pointer-events  none  x000D    background-repeat  no-repeat  x000D    background-position  center left  x000D    x000D   my input focus    overlay  x000D    display  none  x000D    x000D  As SVG  lt svg id  placeholder xmlns  http   www w3 org 2000 svg width  235 height  13  gt  lt text x  0 y  10 font-family  Verdana font-size  12  fill   green  gt Some New Rad Placeholder lt  text gt  lt  svg gt  x000D   lt br gt  x000D  As IMG  lt img id  img  gt  x000D   lt br gt  x000D  As Data URI  lt textarea id  result  gt  lt  textarea gt  lt br gt  x000D   x000D  As  Placeholder   lt div class  wrapper  gt  x000D     lt input id  my input    gt  x000D     lt div id  overlay  gt  x000D   lt  div gt  x000D   x000D   x000D

[html] How to set placeholder value using CSS?

Examples related to html

Examples related to css

Examples related to placeholder