Accessing a background image from a form's css

[jay]

I have created a simple form that shows a check box

Code: Select all

    <form>
      <input type="checkbox" name="fail1" value="1">
    </form>

Then I have linked CSS which styles the check box:

Code: Select all

input[type="checkbox"] {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background: url('[r:getStateImage("Dying", 30)]');
}

The issue that I am having is that the image reference isn't working. When I select the check box I expect an image to be displayed, but nothing is displayed at all.
If I set the style attribute of the checkbox in the form that image will be displayed, just not from the CSS. This will display my image:

Code: Select all

    <form>
      <input style="-webkit-appearance: none; width: 30px; height: 30px; background: url('[r:getStateImage("Dying", 30)]');" type="checkbox" name="fail1" value="1">
    </form>

Any ideas on how I might make that work?

[jay]

I could not get image to work from the forms linked CSS file, but I was able to place it in the header:

Code: Select all

    <style>
      [r: "input[type='checkbox']:checked.pass {  background-image: url("][r: getStateImage("Stable", 30)][r:");}"]
      [r: "input[type='checkbox']:checked.fail {  background-image: url("][r: tableImage("image", 1, 30)][r:");}"]
    </style>