Hide html elements in browser print page with css

In your stylesheet add:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Then add class=’no-print’ (or add the no-print class to an existing class statement) in your HTML that you don’t want to appear in the printed version, such as your button. I got this to work with ‘noPrint’ instead of ‘noprint’ (lowercase).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s