Custom Character Sheet CSS question

I am trying to set up some custom sheets for a wargame. The main use of a character sheet will be to track damage to various systems. My issues mainly have to do with CSS, of which I know very little. The paper sheets use a simple damage track with a marker that moves up or down (or side to side) to note damage to a system. Visually, the d amage track is enhanced by the use of colours - so green/blue -&gt; yellow -&gt; orange -&gt; red basically.&nbsp; There are several systems/hit locations, but the basic mechanics is the same - a damage track with boxes to tick (or push a marker through) and that can go up/down based on accumulating damage or repair to that damage.&nbsp; Here's a cut out of what a portion of the paper sheet looks like, that I am roughly trying to recreate.&nbsp; So what I want to create is a series of checkboxes/radio buttons, and have it set to check all the 'previous' boxes (ie. if orange is the current level, all levels above that (green through yellow) are also checked. I've seen the code for filling radio buttons and check boxes and the example in the Roll20 Wiki CSS Wizardry has a Fiddle for radio buttons that I've looked at.&nbsp; But , I am not sure if it is possible to have the boxes/circles coloured and coloured differently. Would using different classes for each colour box work? In this post for instance&nbsp; <a href="https://app.roll20.net/forum/post/8908642/radio-buttons-as-a-tracker" rel="nofollow">https://app.roll20.net/forum/post/8908642/radio-buttons-as-a-tracker</a> &nbsp; GiGs suggests using checkboxes that look like radio buttons - I am wondering what the CSS would look like for this in order to have the different boxes/buttons be different colours?&nbsp; I'd probably have to use labels or a background image to get the little shields with +1/+2 etc. And could that be a related easier solution? Would using a background image like the one above that the checkboxes then overlay work? I would think then that the colours would be in the background image and the checkboxes or radio buttons would only have to be on/off (black/white) in that case. And if going this route, whats the best way to get things to line up (checkboxes or radio buttons over the background images circles) if using this option? Flex? The overall layout of the 'character' sheet will be using grid with each system (eg. head, body, legs etc) getting its own grid box within which is the damage tracker and related text. Thanks

While I've yet to post on this, I have had great success with applying themes using the new jquery support to change classes (but still using the normal event listener method). Seems to me you could leverage this to change colors by removing and adding classes which apply the colors you want given some event. Check out the article on jquery support here: <a href="https://wiki.roll20.net/JQuery" rel="nofollow">https://wiki.roll20.net/JQuery</a>. I can post an example later if you like. On my mobile currently. Good luck!&nbsp;

I'd probably recommend not using jquery for this as anyone else looking at the sheet won't see the color change, which could make the interface difficult if say both the gm and player are looking at the sheet and discussing the character.

I think I am heading towards a good solution. I went with radio buttons, hiding them, then using CSS to create the 'fake' button based on the label/span (based on techniques in CSS Wizardry and <a href="https://www.sliderrevolution.com/resources/styling-radio-buttons/" rel="nofollow">https://www.sliderrevolution.com/resources/styling-radio-buttons/</a> ). I used a small image:&nbsp; &nbsp; to indicate which one is currently active (instead of a dot or checkmark or whatever). The current result looks like: More playing on the custom sheet sandbox should help me refine things.