Style form placeholders ✧ unicorntears.dev ✧

For some odd reason, styling placeholders doesn’t seem to be well documented by any browser.

Until it gets easier to style forms, this will have to do.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: __COLOR__;
}
::-moz-placeholder { /* Firefox 19+ */
  color: __COLOR__;
}
:-ms-input-placeholder { /* IE 10+ */
  color: __COLOR__;
}
:-moz-placeholder { /* Firefox 18- */
  color: __COLOR__;
}

If you are using Sass, you can nest this snippet to make the styles specific to a particular form:

#form3 {
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: __COLOR__;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: __COLOR__;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: __COLOR__;
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: __COLOR__;
  }
}