Force browser to print background images

I was working on a page with coupons and the coupon had check boxes that the user could check and then print the page to take to the store. I had some trouble styling the checkboxes as the art director wanted the checkbox border to be red. That sounds simple, but I struggled for a little while, then decided to use JS and background images to make this work. It was a pretty easy solution, until I printed the page. By default, browsers do not print background images. There is not a straightforward solution for this, as it is meant to be in the control of the user. Well, I found what looks to be a good solution. Keep in mind that this probably doesn’t work in old browsers, but I will test soon.

As of now, it works in all current versions of the following browsers, at the time of this post (5-10-18):

IE, Edge, FireFox, Chrome, Safari, Opera

@media print {
.checkbox_checked:before {
content: url(images/check-mark.gif);
}
}

If you are interested in my solution to style the checkbox borders, I created a DIV and used a background image of a check mark. I used JavaScript (JQuery) to change the class when you click on the DIV. One class had the background image of the check mark, and the other did not. I just toggled between the two.

HTML
<span class="checkbox"></span> 

CSS
.checkbox {
	border: 2px solid #EC1D25; 
	width:15px; 
	height:15px;
	display:inline-block;	
	cursor:pointer;
}

.checkbox_not-checked {
	background-image:none;
}
.checkbox_checked {
	background-image:url(images/check-mark.gif);
}

JavaScript
	$(".checkbox").on("click", function() {
		if($(this).hasClass("checkbox_not-checked"))
			{ 
				$(this).removeClass("checkbox_not-checked");
				$(this).addClass("checkbox_checked");
				console.log('checked');
			}
		else if($(this).hasClass("checkbox_checked"))
			{
				$(this).removeClass("checkbox_checked");
				$(this).addClass("checkbox_not-checked");
				console.log('not checked');
			}
		else
			{
				$(this).addClass("checkbox_checked");
				console.log('checked');
			}
  });
It's only fair to share...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
Share on Google+
Google+
This entry was posted in CSS3, HTML/CSS, JavsScript, jQuery and tagged , , , . Bookmark the permalink.