CODEWITHSUNDEEP
cssprintingwebformsstylesheetmedia-queries
L84
L84

Reputation: 46308

Couple Print Stylesheet Questions

What I want to do I do not think is possible but I ask anyway =>

First - I am not displaying images when printed as my pages can get image heavy or at least a couple decent size images that would eat ink up. So is it possible to not display images yet display the ALT text of the image so the user will know what the image was.

Second - When a user prints a form it is kinda ugly as the forms are styled. Is there a way to change the input to display just the text of the inputs and nothing else.

There is a similar question to this ~ Print Stylesheet - Converting inputs to text ~ I understand that this could be done using jQuery but is there a CSS Only method to achieving this?

Thanks!

EDIT - I figured out my second question. I made the forms border and background white to match the page. In other words it hides and shows only the text. =>

Upvotes: 0

Views: 111

Answers (1)

Brian Hoover
Brian Hoover

Reputation: 7991

Yes, there is. It's called @media and has been supported in major browsers for a while.

So, let's say that you had something like:

<img class="no-print" src="image" /><span class="print">Image Label</span>

Your style sheet could be something like:

<stye>
   .print {display: none;} // only to be displayed when this is being printed so the default is to not display
   @media print {
      .print {display: inline}
      .no-print {display: none}
   }
</style>

Upvotes: 2

Related Questions