Show checkbox as if unchecked when printing?

Question

I have a website with a list of checkboxes that can be used for printing as well. Though when printing it should print a clean slate, not the current state of the checkboxes on the website. However, I don't want to clear the state on the page itself, only on the printed version.

So is it possible to visually remove the tick from checkboxes in CSS?

Something like:

@media print
{
    input[type=checkbox]
    {
        tick: none;
    }
}

In print you want just the border square box which can be manually ticked, right? So in print CSS you might just change the design of check boxes so that you hide the original checkbox html , doesn't matter if checked or not. And then just style or show a square border box , good enough for a checkbox looking box for printing. Will this work? As via CSS you can change design and not the html state of the forms. — Muhammad Asadullah, Jan 28 '20 at 20:36
Does this answer your question? [Uncheck a checkbox using CSS](https://stackoverflow.com/questions/24135355/uncheck-a-checkbox-using-css) — Sebastian Brosch, Jan 28 '20 at 20:36
@Mohsin So essentially you're suggesting just hiding the checkbox in css, and drawing a box in it's place? That should be possible with like a `:before` selector or something. I'll try that :D — The Oddler, Jan 28 '20 at 20:38
@SebastianBrosch I don't think so, unless I'm missing something. — The Oddler, Jan 28 '20 at 20:39
Exactly, using :before selector you can insert something there good enough for printing needs. Glad you are going to try this idea. Good luck :D — Muhammad Asadullah, Jan 28 '20 at 20:41
I have copied it to answer also if it works please mark it resolved. Good luck — Muhammad Asadullah, Jan 28 '20 at 20:44
@Mohsin I tried this: `input[type=checkbox]::after{ content: "[]"; }` however that does nothing. It doew work with `div::after{ ... }`, but of course places the boxes everywhere then. — The Oddler, Jan 28 '20 at 20:45
Sorry I am on mobile so cannot try code , but you may need to add position absolute and top, right margin to get it right. Also add border and background to get more control of it. Will reply tomorrow if you cannot get it resolved by then. Late here. — Muhammad Asadullah, Jan 28 '20 at 20:47
Why do you want to show a blank slate on print? What's the point of printing a blank form after someone spends time to fill it out? It is currently sounding like an X/Y problem. — TylerH, Jan 28 '20 at 21:08
@TylerH As i understand not whole form is being print in blank slate, just the last consent checkbox which most of the time in real situation is needed with whole form filled in computer but last consent line with TICK (Manual hand marked) is done on printed form for physical record keep... — Muhammad Asadullah, Jan 29 '20 at 09:59
@Mohsin If the last checkbox needs to checked with a pen by hand, then it shouldn't be getting filled out via the computer. It should be hidden on the computer via a `screen` media query and shown via a `print` media query. — TylerH, Jan 29 '20 at 14:10

score 1 · Accepted Answer · answered Jan 28 '20 at 20:43

1

I suggest following approach.

In print you want just the border square box which can be manually ticked, right?

So in print CSS you might just change the design of check boxes so that you hide the original checkbox html , doesn't matter if checked or not. And then just style or show a square border box using some pseudo selector like : before :after, , good enough for a checkbox looking box for printing.

As via CSS you can change design and not the html state of the forms. So in media query of print or print style sheet only option is designing, styling...

answered Jan 28 '20 at 20:43

Muhammad Asadullah

3,735
1
22
38

1

Sadly it seems you can't use `:after` on inputs: https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field I'll have to do some restructuring, and maybe just add an element I only show when printing. – The Oddler Jan 28 '20 at 20:48
I see. Good find. Yes hiding the checkbox and then you can target any nearby div or element which. I am sure you will get it working. Good luck – Muhammad Asadullah Jan 28 '20 at 20:51
By the way there is :checked selector also you can use to hide only checked checkboxes. – Muhammad Asadullah Jan 28 '20 at 20:52

Show checkbox as if unchecked when printing?

1 Answers1