How to change 's placeholder color?

Question

I tried the following with the stylesheet and <input/> yet the color of the placeholder still has not changed and stays at the default color. Am I doing it incorrectly?

my css stylesheet:

#input-field {
  background-color: rgba(255,255,255,0.1);
  border: 0;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 12px;
  box-shadow: none;
  color: rgba(255,255,255,0.8);
}

:-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    blue;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    blue;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    blue;
   opacity:  1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    blue;
}

And my <input/>:

  <input
    className="form-control"
    id="input-field"
    placeholder='Change This Color'
  />

Possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) — Mehrad, Sep 10 '16 at 00:03

Mehrad · Accepted Answer · 2016-09-10T00:07:48.300

4

webkit needed two colons ::

#input-field {
  font-family: serif;
  background-color: rgba(255,255,255,0.1);
  border: 0;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 12px;
  box-shadow: none;
  color: rgba(255,255,255,0.8);
}

::-webkit-input-placeholder {
   color: blue;
}

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

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

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

<input
    className="form-control"
    id="input-field"
    placeholder='Change This Color'
  />

to change the font-family add font-family: serif; to #input-field

edited Sep 10 '16 at 00:07

answered Sep 09 '16 at 23:44

Mehrad

1,495
14
22

Tried `font-family: "Helvetica Neue";` but the placeholder didn't change – Sep 10 '16 at 00:37
Repeat the font-family line in each of the placeholder definitions in the CSS – Mehrad Sep 10 '16 at 00:40
also, is `font-family: "Helvetica Neue";` in the right format? – Sep 10 '16 at 00:46
It's right, as long as you have the font installed on your computer it should show up – Mehrad Sep 10 '16 at 00:49

Bibek Shakya · Answer 2 · 2016-09-10T01:16:00.063

1

In your Html Page

<input
class="form-control"
id="input-field"
placeholder='Change This Color'
/>

in your css page

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
  font-family:Helvetica Neue;
}

font-family:Helvetica Neue is working for me here is the link

edited Sep 10 '16 at 01:16

answered Sep 09 '16 at 23:46

Bibek Shakya

1,233
2
23
45

Worked! Thank you so much! One last question before I accept the answer and upvote, how can I change the family-font of placeholder and typed text inside? – Sep 09 '16 at 23:58

Yash Jain · Answer 3 · 2016-09-10T01:57:10.243

Simply put this code down. Your error was that you forgot to put a colon.

I put a lot of time in this, but it all comes down to putting another colon after :-webkit-input-placeholder, making it ::-webkit-input-placeholder.

I just discovered someone else answered the same exact way I did, and I don't mean to copy them, because I figured this out myself.

Take a look at the complete code. PS I made it look cursive for font-family.

#input-field {
  background-color: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 12px;
  color: red;
  box-shadow: none;
  font-family: cursive;
}
::-webkit-input-placeholder {
  color: blue;
  font-family: cursive;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: red;
  opacity: 1;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
  opacity: 1;
}
:-ms-input-placeholder {
  color: red;
}

<input className="form-control" id="input-field" placeholder='Change This Color' />

how can I change the family-font of placeholder and typed text inside? — , Sep 10 '16 at 00:36

How to change 's placeholder color?

3 Answers3