Forum How do I...?

How to specify the background and border colour of a form checkbox

David J Prokopetz
When generating a PDF form from an HTML form (with form fields enabled), I can't seem to figure out how to set the border and background colors for a checkbox. The properties "background-color" and "border-color" appear to be respected for text inputs, but not for checkbox inputs.

i.e., this works:

input[type=text] {
    background-color: blue;
    border-color: red;
}


... but this doesn't:

input[type=checkbox] {
    background-color: blue;
    border-color: red;
}


The resulting checkbox in the PDF form always has a white background and a medium grey border. The element is recognised as a checkbox field by Adobe Acrobat, and I can manually set its background and border colour to the desired values within Acrobat with no difficulty – it's just the initial output produced by Prince that seems to have fixed colours.

Is there some other CSS attribute I should be using to achieve this effect?
  1. form-field-colour-test.html0.6 kB
  2. form-field-colour-test.pdf77.8 kB
wangp
background-color and border-color have no effect on checkboxes and radio buttons, in line with browser behaviour. So for now, those colours are fixed.

Browsers now implement a accent-color property to allow some amount of styling of those controls.
David J Prokopetz
Hm. I can see the argument for not extending background and border styles to checkboxes and radio buttons by default, since a given HTML source might have an over-broad style applied to the "input" element, in which case allowing it to apply to those elements would cause an inconsistency between Prince's output and browser output. However, PDFs do allow the backgrounds and borders of checkboxes and radio buttons to be styled, so that leaves us in a position where something that's trivial to accomplish in a PDF editor can't be accomplished with Prince at all.

I'm no sure what the best workaround for that would be. A command line switch to allow background and border styles to be applied to checkboxes and radio buttons? A Prince-specific CSS property? There are a few ways to go there.
mikeday
The latest build now supports the accent-color property on PDF radio and checkbox form controls.