0

How do I set the placeholder background as seen with the blue below on the image?

Valid XHTML

Update

So alright, the background of the input field can be set by ::-placeholder but how do we get the background color on the placeholder text to not extend beyond the text?

Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
  • As in background-color? What have you tried - this isn't totally clear... For your reference: [Style Placeholder Text](http://css-tricks.com/snippets/css/style-placeholder-text/) – random_user_name May 28 '14 at 22:07
  • I think this will answer your question: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – jos May 28 '14 at 22:10

4 Answers4

1

For webkit:

#id::-webkit-input-placeholder {background:blue;}

For Firefox:

#id::-webkit-input-placeholder {background:blue;}
David Corbin
  • 524
  • 2
  • 11
  • 25
  • This seems to color the background for the whole input field. How would I wrap the background color to not extend beyond the text, as seen on the example image? – Fellow Stranger May 28 '14 at 22:18
  • 1
    @Numbers I don't know of a way to do that. If you want to select the text as was done in your screenshot, you can use the javascript `select()` function. – David Corbin May 29 '14 at 00:37
1
::-webkit-input-placeholder {
   background-color: blue;
}

:-moz-placeholder { /* Firefox 18- */
   background-color: blue;  
}

::-moz-placeholder {  /* Firefox 19+ */
   background-color: blue;  
}

:-ms-input-placeholder {  
   background-color: blue;  
}

You can also style other pseudo elements for the input such as:

input#thisInput:hover::-webkit-input-placeholder {
   background-color: red;
   color:black;
}
MilkyTech
  • 1,919
  • 2
  • 15
  • 39
  • This seems to color the background for the whole input field. How would I wrap the background color as seen on the example image? – Fellow Stranger May 28 '14 at 22:14
  • don't know. background-size doesn't seem to have any effect on these pseudo elements. neither does setting a width – MilkyTech May 28 '14 at 22:26
0

in css or directly on the code:

background-color:#XXXXXX

malaquias
  • 65
  • 1
  • 1
  • 9
0

You can use the ::placeholder pseudo element, but it's a non-standard element and not supported by all browsers.

src
  • 205
  • 1
  • 8