change placeholder text color of textarea

Question

I know there is this post on changing the placeholder text. I've tried implementing in on my textarea tags

textarea::-webkit-input-placeholder {
color: #fff;
}

textarea:-moz-placeholder { /* Firefox 18- */
color: #fff;  
}

textarea::-moz-placeholder {  /* Firefox 19+ */
color: #fff;  
}

textarea:-ms-input-placeholder {
color: #fff;  
}

but it's not doing anything. What am I missing?

This is what one of my textarea's looks like

<textarea
  onChange={(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}
  placeholder="Overall Satisfaction Question"
  name="SEO__Question__c"
  type="text"
  className="slds-input"
  value={firstQuestion.SEO__Question__c ? firstQuestion.SEO__Question__c : ''}
  style={inputStyle}
  autoFocus
/>

`color: #fff;` :) I'm afraid to ask: *what's your background color* ;) - Yeah, I mean your code works just fine otherwise... Chrome at least. — Roko C. Buljan, May 04 '17 at 22:18
@RokoC.Buljan it's a dark image, with a clear input. No white background. :) — Tyler Zika, May 04 '17 at 22:22
I needed this link https://stackoverflow.com/questions/9451902/changing-an-inputs-html5-placeholder-color-with-css-does-not-work-on-chrome — fungusanthrax, Jul 20 '18 at 16:55

Roko C. Buljan · Accepted Answer · 2022-11-15T22:38:29.803

For modern browsers, use just the ::placeholder pseudo element:

textarea::placeholder {
  color: #0bf;
}

Legacy and modern browsers:

textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
  color: #0bf;  
}

<textarea placeholder="test"></textarea>

And related to your code, wrap in quotes:

onchange="{(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}"

score 22 · Answer 2 · answered Jan 12 '18 at 18:00

22

I am not sure but I think is not necessary to use the prefixes right now.

textarea::placeholder {
  color: #fff;  
}

answered Jan 12 '18 at 18:00

José Jesús Ochoa Torres

459
4
9

1

You can find an article in Mozilla Developers website that contains compatibility information: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#Browser_compatibility. TLDR: prefix is still required for some browsers. – AlexGuti Feb 28 '18 at 14:10
Safari (v12) still requires prefix today – JPowell Jan 14 '19 at 19:47

score 0 · Answer 3 · answered Mar 29 '20 at 07:45

::-webkit-input-placeholder {
       color: orange;
    }
    :-moz-placeholder { /* Upto Firefox 18, Deprecated in Firefox 19  */
       color: orange;  
    }
    ::-moz-placeholder {  /* Firefox 19+ */
       color: orange;  
    }
    :-ms-input-placeholder {  
       color: orange;  
    }

score -3 · Answer 4 · answered Aug 15 '18 at 14:48

-3

textarea::placeholder {color: #fff;}

answered Aug 15 '18 at 14:48

Monyane Ramollo

15
3

change placeholder text color of textarea

4 Answers4

Linked

Related