change style of input placeholder with java script

Question

I tried to change the color of the placeholder by adding a new class, so that the color property is overwritten. However, it does not seem to work. Following code is intended to change the placeholder color from green to red, however it is changed from green to default black/gray.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <input class="class" id="id" type="" name="" placeholder="placeholder text">
</body>
<style type="text/css">
  .class::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    green;
  }
  .class2::-moz-placeholder {
    color:  red !important;
   }
</style>
<script type="text/javascript">document.getElementById("id").className+="class2";</script>
</html>

Where is the mistake or which alternative does work?

You need to separate css classes with a space, ie .className += ' class2'. Why not just replace the class though? There's nothing in class that isn't in class2 — Phil
– Phil, Commented Jul 7, 2016 at 1:13
I reduced the problem to the minimum, in the original problem there are defined more properties — chromosapiens
– chromosapiens, Commented Jul 7, 2016 at 1:18

Sebastian Simon · Accepted Answer · 2016-07-07 01:14:25Z

2

document.getElementById("id").className += "class2";

turns the class name into "classclass2". Because there is no corresponding class classclass2 in your CSS, this element is ignored. Add a space before the new class name:

document.getElementById("id").className += " class2";

or use the more modern classList approach:

document.getElementById("id").classList.add("class2");

answered Jul 7, 2016 at 1:14

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oz Lodriguez · Accepted Answer · 2016-07-07 01:23:20Z

1

A nice modern solution for this for ES5 ready browser is to use the classList method from a selected DOMnode. This way you will not run into concat problems when rendering fragments to the DOM.

document.getElementById("id").classList.add("class2")

edited Jul 7, 2016 at 1:23

answered Jul 7, 2016 at 1:14

Oz Lodriguez

9735 silver badges17 bronze badges

Collectives™ on Stack Overflow

change style of input placeholder with java script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related