Printing a checked checkbox / tick box with HTML and CSS

Question

I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. However, this service is a bit limited in it's functionality, so I need a way to "work around" it.

I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. In particular I've tried:

• Using the unicode ☐ ("☐") and ☑ ("☑") characters, but the converter doesn't render them (probably the font it's using doesn't have them)
• Using the WingDing characters þ and ¨ but again, the wingding font is not recognized
• The converter doesn't support images, so can't just use an image

I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like:

<span style="border: 1px solid black; height: 12px; width: 12px;"></span>

However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line.

Can anyone help me "draw" checkboxes using just "basic" html elements? What would be the cleanest way?

PS: checkboxes need to be inline with the text.

Answer 1

You're on the right track.

Using HTML and CSS:

/* The standalone checkbox square*/
.checkbox {
  width:20px;
  height:20px;
  border: 1px solid #000;
  display: inline-block;
}

/* This is what simulates a checkmark icon */
.checkbox.checked:after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  
  /* "Center" the checkmark */
  position:relative;
  top:4px;
  left:7px;
  
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<div class="checkbox"></div> Unchecked<br><br>

<div class="checkbox checked"></div> Checked

The reason YOUR code didn't work was because you were using a span element, which is an inline element. You can use a span for this, but you'll need to add the style of display: block to the element (making it act as a block element instead of an inline element).

The div tag is a block, so no need for setting it's display style. If you would like the div to display inline, set the display: inline-block