Failed to change placeholder color of an input

so I have an input and I was trying to change the color of the placeholder, in some websites I believe I see people are changing the placeholder color

I tried changing with elem.value but it doesn't make any sense value and placeholder are two different things even .placeholder and then style is not working as you can see below. can't find the way to do it am I missing something? here is my code:

 const elem = document.getElementById("myInput");
 elem.placeholder.style.color = "green";

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="new">
      <input type="text" id="myInput" placeholder="type here" />
    </div>
  </body>
</html>

‏

Solution

there's an easy way with css, not javascript

in css we have a pseudo-element called ::placeholder https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

as you may have guessed right now:

#myInput::placeholder {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="new">
      <input type="text" id="myInput" placeholder="type here" />
    </div>
  </body>
</html>