K48 K48 - 6 months ago 77
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

, 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?


From the docs:

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