How to update placeholder color using Javascript?

Question

I'm searching online and I didn't find anything. I'm trying to update the placeholder color of a textbox using javascript, but how can I do that? I have a color picker and the color is changing.

If I have something like this in my CSS, how can I update it?

::placeholder {    color: red;  }

<input placeholder="placeholder" />

Is there a javascript command to edit this? Something like

document.getElementById('text').style.placeholderColor = newColor; 

Answer 1

Use CSS variables. You can also target only the needed element

function update() {    document.querySelector('input[type=text]').style.setProperty("--c", "blue");  }

::placeholder {    color: var(--c, red);  }

<input type="text" placeholder="I will be blue">  <input type="number" placeholder="I will remain red">  <button onclick="update()">change</button>

CSS variables are useful when it comes to modify pseudo elements that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your custom property that you can easily update on the main element and the pseudo element will inherit it.

Related : Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Answer 2

As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:

const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });  const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;  placeholderStyle.color = "red";    Object.assign(document.body.appendChild(document.createElement("input")), {    type: "button", value: "Color!", onclick() {      placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);  }});

<input placeholder="placeholder" />