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, CommentedJul 7, 2016 at 1:13
I reduced the problem to the minimum, in the original problem there are defined more properties — chromosapiens, CommentedJul 7, 2016 at 1:18

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

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");

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

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")

Collectives™ on Stack Overflow

change style of input placeholder with java script

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related