Sign up form

Community feedback

• 

  Bonrey•1,130

  @BonreyPosted over 3 years ago

  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! 😉

  1