Accessing a background image from a form's css

Discuss macro implementations, ask for macro help (to share your creations, see User Creations, probably either Campaign Frameworks or Drop-in Resources).

Moderators: dorpond, trevor, Azhrei, giliath, jay, Mr.Ice

Post Reply
User avatar
jay
RPTools Team
Posts: 1767
Joined: Tue Feb 07, 2006 1:07 am
Location: Austin, Tx
Contact:

Accessing a background image from a form's css

Post by 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?

User avatar
jay
RPTools Team
Posts: 1767
Joined: Tue Feb 07, 2006 1:07 am
Location: Austin, Tx
Contact:

Re: Accessing a background image from a form's css

Post by 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>

Post Reply

Return to “Macros”