K48 K48 - 1 month ago 26
CSS Question

Remove 3D inset border in Webkit for checkboxes when using wkhtmltopdf

Note: this is not a duplicate of other questions about removing checkbox border in browsers. This specifically applies to Webkit as used in wkhtmltopdf, and not as used in Google Chrome.

I am using

wkhtmltopdf
, an HTML-to-PDF converter that uses the webkit engine.

In the resulting PDF, checkboxes look like this, with an inset border:

enter image description here

I want them to have just a normal 1px solid border.

Here's what I've tried:

input[type=checkbox] {
border: 1px solid black;
box-shadow: none;
/* -webkit-appearance: none; */ /* doesn't work - removes checkbox entirely */
}


What's baffling is that Google Chrome also uses Webkit, but the checkbox looks good there.

Is there any other way to change how the checkbox is displayed by wkhtmltopdf?

Answer

From the docs:

  --checkbox-checked-svg <path>   Use this SVG file when rendering checked
                                  checkboxes
  --checkbox-svg <path>           Use this SVG file when rendering unchecked
                                  checkboxes

http://wkhtmltopdf.org/usage/wkhtmltopdf.txt