How to give placeholder color?

Question

Hi below text is a placeholder that is from js ,its color is #ccc .I need the textarea color as black ,right now it is taking placeholder color .

<textarea id="txt1" class="txt1 required" name="comment1"></textarea><br>


 var firstname = userModel.get('firstName');
  $('textarea#txt1').val('Hey ' +firstname+',\nTell us what is on your mind').css('color','#ccc');
    });

How to give different color for textarea and placehoder

Can you use `HTML5`? If yes then we can user html attribute `placeholder` — Talha Ahmed Khan, Nov 20 '12 at 05:53

Beno · Accepted Answer · 2012-11-20T06:07:58.147

4

The placeholder text can be set using the placeholder attribute like so:

var name = "some name";

$('#txt1').attr('placeholder', 'Hey ' + name + ', Tell us what is on your mind');

http://jsfiddle.net/rxhHS/1/

edited Nov 20 '12 at 06:07

answered Nov 20 '12 at 05:57

Beno

4,633
1
27
26

How to call the name then ? I am calling the first name and displaying in as a placeholder – Prashobh Nov 20 '12 at 06:03
just like you were doing before. I have updated it with a name variable – Beno Nov 20 '12 at 06:08
yea working fine ,but \n is not working ,how to give break in placholder – Prashobh Nov 20 '12 at 06:24
@prash, i'm not sure it is possible. please take a look at this question: http://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea – Beno Nov 20 '12 at 22:34

score 0 · Answer 2 · answered Nov 20 '12 at 05:57

0

Using CSS

   .txt1{background-color:black;color:white;}
    #txt1::-webkit-input-placeholder {
      color: #ccc;
    }

DEMO

answered Nov 20 '12 at 05:57

Sibu

4,609
2
26
38

But i need it in js , "+firstname+" I am calling the login name and displaying as placeholder – Prashobh Nov 20 '12 at 06:02
@prash your tag had css, so i thought of giving it as answer, please remove css tag if it is not necessary. – Sibu Nov 20 '12 at 06:04

Talha Ahmed Khan · Answer 3 · 2012-11-20T06:10:14.490

basically you are defining a color to the textarea. so it will be equal for all the text.

If you are using HTML 5 then we can write the textarea as follows.

<textarea id="txt1" 
    placeholder='Hey, Tell us what is on your mind' 
    class="txt1 required" name="comment1"></textarea>

But if you are not using HTML5, Then we can use a very good jQuery plugin (I personally used it)

https://github.com/mathiasbynens/jquery-placeholder

EDIT

Want to add the name in placeholder.

var firstname = userModel.get('firstName');
$('textarea#txt1').attr('placeholder','Hey '+firstname+', Tell us what is on your mind');

but then how to display the name ...+firstname+' – Prashobh Nov 20 '12 at 06:05 — Prashobh, Nov 20 '12 at 06:05

How to give placeholder color?

3 Answers3