How to hide a image button from printing using CSS?

Question

I have a "Print" button in my web page (php html) and I don't want it to print along with my data. Can I do it with CSS? Is there another way?

Instead of hiding that button open a new window with javascript with the content you want to print and call the javascript function to print in that window and close it. — vedarthk, Mar 08 '13 at 10:10
@JamieHutber I am not sure whether CSS way will work on all browsers. That is why I suggested that option. — vedarthk, Mar 08 '13 at 10:11
I need to pass variables with php so I can't use window.open() — CMartins, Mar 08 '13 at 10:14
@CarlosMartins That is not an issue, you can send data via GET in URLs. — vedarthk, Mar 08 '13 at 10:15

score 3 · Accepted Answer · answered Mar 08 '13 at 10:12

3

Yes you can with CSS, although support will only be with browsers that support CSS3.

But its simple:

 @media print {
    …
 }

answered Mar 08 '13 at 10:12

Jamie Hutber

score 1 · Answer 2 · answered Mar 08 '13 at 10:10

1

assign an id(buttonId) to the button eg: id="buttonId" and then in css:

#buttonId
{
    display:none;
}

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

just use the above css file for the same.

answered Mar 08 '13 at 10:10

can you please explain why it is downvoted? – Kumar Saurabh Sinha Mar 08 '13 at 10:12
I think it wont hide the other buttons as id is used and only one element will have that id in the page – Kumar Saurabh Sinha Mar 08 '13 at 10:17

Jordy van Eijk · Answer 3 · 2013-03-08T10:16:42.963

1

Just create multiple style sheets

<style type="text/css" media="all"> @import "nucss2.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

And look at the

media="print"

edited Mar 08 '13 at 10:16

answered Mar 08 '13 at 10:11

Jordy van Eijk

3 Answers3