Removing input placeholder on a printable version of an html page

Question

I have a form with input fields. Each input field has a placeholder attribute. There is also a link displaying the printable version of the same form.

My problem is that if I leave the placeholder attribute unchanged and the input field is empty, then the placeholder is actually printed, which is not very good.

I am looking for a way to resolve this unfortunate behavior. Right now, the only thing I can think of is traverse the DOM in javascript and remove all the placeholder attributes when the printable version is given. Of course, when reverting back to the normal page view, the placeholder attributes must be restored too.

This is not hard, but is also not very elegant. I wonder if there is a better solution.

score 21 · Accepted Answer · edited May 23 '17 at 12:01

21

In most modern browsers, you should be able to hide placeholders when printing, via some non-standard CSS selectors.

@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;
  }
}

(or color: white, etc.)

Selector list stolen from: Change an HTML5 input's placeholder color with CSS

edited May 23 '17 at 12:01

Community

1
1

answered May 11 '13 at 03:22

Paul Roub

36,322
27
84
93

What's the difference between 2 and 3? – mark May 11 '13 at 03:25
2: a pseudo-selector. 3: a pseudo-element. 2 can be applied to other elements (a:-moz-placeholder), 3 can't. You'll want both if you want to support FF 4 and up. – Paul Roub May 11 '13 at 03:27
This doesn't work in IE 11. It appears IE overrides both `transparent` and `white` to ensure text contract (other colors work as expected, but of course do not hide the text). The only solution I found so far is `opacity: 0`, but that also hides the text box itself. – quietmint Apr 15 '15 at 18:23
`::placeholder-shown` appears to be the latest version, per [CSS tricks](https://css-tricks.com/almanac/selectors/p/placeholder-shown/) – Paul Roub Jan 19 '16 at 18:08
1

Don't forget `text-shadow:none;` if applicable. – Chris Thorsvik Jan 25 '17 at 17:44

score 2 · Answer 2 · answered Feb 07 '15 at 07:14

2

or you can move it outside the visible area of the parent element by text-indent or some other overflowy hack

answered Feb 07 '15 at 07:14

mike nvck

454
2
9

Removing input placeholder on a printable version of an html page

2 Answers2

Linked

Related