CSS hide placeholder on print

gene picture gene · Jan 31, 2014 · Viewed 7.9k times · Source

Is there a way to hide an input's placeholder text in the print style sheet. I have a form that can optionally be printed and faxed/mailed. I don't know why someone out want to do that, but that's what the client wants. So the placeholder text is in the way on the printed document.

Answer

Dryden Long picture Dryden Long · Jan 31, 2014

Taken from the accepted answer here: Removing input placeholder on a printable version of an html page

You can use a print media query to change the text color transparent. It doesn't "remove" the text, but makes it invisible, so same result...

@media print {
  ::-webkit-input-placeholder { /* WebKit browsers */
      color: transparent;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: transparent;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: transparent;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: transparent;
  }
}