Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS hide placeholder on print [duplicate]

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.

like image 361
gene Avatar asked Jan 31 '14 16:01

gene


1 Answers

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;
  }
}
like image 153
Dryden Long Avatar answered Nov 11 '22 14:11

Dryden Long