Sign up form

Hello! 👋 In order to change placeholder color, you should add to your input tag the following class:

input.custom-placeholder::placeholder {
  color: red;
}

And then, every time the input is invalid, you should toggle this class in JS like so:

inputField = document.querySelector("your input field");
...
if (invalid input) {
  inputField.classList.add("custom-placeholder");
}
...

To reset the placeholder color, just remove the class:

inputField.classList.remove("custom-placeholder");

And of course, don't forget to set the default placeholder styles in css:

input.default::placeholder {
/* something like this */
    color: gray;
    opacity: 0.5;
}

Good luck! 😉