Javascript: Change placeholder color of created input

Question

So i created a input using document.createElement but i just cant seem to get my mind around changing the color of the text of the placeholder i made for it!? How do i do this? ive already tried doing element.placeholder.style.color element::placeholder.style.color and more!

Extremely thorough answer in the linked duplicate. – Pointy Feb 25 '18 at 14:47 — Pointy, Feb 25 '18 at 14:47

Pointy · Answer 1 · 2018-02-28T15:11:41.690

1

You can use the ::placeholder pseudo-class in most modern browsers:

input::placeholder {
  font-weight: bold;
  font-style: italic;
  opacity: 0.5;
  color: #336699;
}

<input type=text placeholder="Hello World">

The pseudo-class is currently not part of a specification (well not part of a "ratified" spec) so it's often seen behind a prefix like -webkit-placeholder or -moz-placeholder. In Firefox 58 and Chrome 64 however plain ::placeholder does work.

From a userscript, you can create a new <style> element containing your rules and append that to the document body.

edited Feb 28 '18 at 15:11

answered Feb 25 '18 at 14:28

Pointy

405,095
59
585
614

As i do not have access to the css and i already know this, i will not see this as an answer, the fact that i made a userscript and want to change the color of a placeholder element – Qyther Feb 27 '18 at 14:31
@Qyther but you *do* have access to the CSS. You can add an ordinary class to the target element and then create a new ` – Pointy Feb 27 '18 at 14:33
AS I TOLD YOU, I DO NOT HAVE ACCESS TO CSS BECAUSE IT IS A USERSCRIPT – Qyther Feb 28 '18 at 14:58
Can you manipulate the document at all? If so, you can **add** a ` – Pointy Feb 28 '18 at 15:06

score 0 · Answer 2 · answered Feb 25 '18 at 14:29

0

You can add the property to ::placeholder pseudo element.Know more here

var x = (document.createElement('input'));
x.placeholder = "Test";
document.body.appendChild(x)

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

answered Feb 25 '18 at 14:29

brk

48,835
10
56
78

As i do not have access to the css and i already know this, i will not see this as an answer, the fact that i made a userscript and want to change the color of a placeholder element – Qyther Feb 27 '18 at 14:31

Javascript: Change placeholder color of created input

2 Answers2