How to change input element placeholder's color in javascript?

Question

It is possible to assign the text:

inputElement.placehoder="my placeholder";

But how to adjust placeholder's color or opacity (without creating css selectors) ?

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder afaik, you have to make a class. Inline styles only affect the element they are on, and children if their properties are inherited — Taplar, Dec 30 '19 at 23:58
Does this answer your question? [How to update placeholder color using Javascript?](https://stackoverflow.com/questions/54749402/how-to-update-placeholder-color-using-javascript) — Evik Ghazarian, Dec 30 '19 at 23:58
There is another StackOverflow thread fixes it using JQuery. https://stackoverflow.com/questions/14967250/jquery-change-placeholder-text-color Please take a look. — Prasool, Dec 31 '19 at 00:00

AndrewL64 · Answer 1 · 2019-12-31T00:04:33.663

Just add a class say, custom-placeholder attached to a predefined ::placeholder selector to your css and then use JavaScript to add it to your element like this:

.custom-placeholder::-webkit-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder:-ms-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder::placeholder {
  color: red;
  opacity: 0.4;
}

Check and run the following Code Snippet for a practical example of the above:

document.getElementById("input").classList.add("custom-placeholder");

.custom-placeholder::-webkit-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder:-ms-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder::placeholder {
  color: red;
  opacity: 0.4;
}

<input id="input" type="text" placeholder="hello world" />
<input id="input2" type="text" placeholder="this would not be affected" />

score 0 · Answer 2 · answered Dec 30 '19 at 23:58

0

You will need to define classes for the different appearances you want and then apply those classes through your JS.

See the answer to this question to do that: jQuery change placeholder text color

answered Dec 30 '19 at 23:58

iJamesPHP2

524
4
13

score 0 · Answer 3 · answered Dec 30 '19 at 23:59

You can't; only the pseudo-element ::placeholder in CSS can effect the color

At best, you can apply this styling to a class / id, and then use JavaScript to add that class to your element

::placeholder {
  color: blue;
}

<input placeholder="I should be blue" />

How to change input element placeholder's color in javascript?

3 Answers3