White Wolf Traits :: Loop on click

Loop trough White Wolf style traits by clicking the group, instead of laying out radio buttons.

by Brian shields

HTML

<div>
    <span class="sheet-attribute-name">Strength</span>
    <div class="sheet-dots">
        <input type="radio" class="sheet-dots0" name="attr_Strength" value="0" /><span></span>
        <input type="radio" class="sheet-dots1" name="attr_Strength" value="1" checked="checked" /><span></span>
        <input type="radio" class="sheet-dots2" name="attr_Strength" value="2" /><span></span>
        <input type="radio" class="sheet-dots3" name="attr_Strength" value="3" /><span></span>
        <input type="radio" class="sheet-dots4" name="attr_Strength" value="4" /><span></span>
        <input type="radio" class="sheet-dots5" name="attr_Strength" value="5" /><span></span>
        <input type="radio" class="sheet-dots6" name="attr_Strength" value="6" /><span></span>
        <input type="radio" class="sheet-dots7" name="attr_Strength" value="7" /><span></span>
        <input type="radio" class="sheet-dots8" name="attr_Strength" value="8" /><span></span>
        <input type="radio" class="sheet-dots9" name="attr_Strength" value="9" /><span></span>
        <input type="radio" class="sheet-dots10" name="attr_Strength" value="10" /><span></span>
    </div>
</div>
<div>
    <span class="sheet-attribute-name">Dexterity</span>
    <div class="sheet-dots">
        <input type="radio" class="sheet-dots0" name="attr_Dexterity" value="0" /><span></span>
        <input type="radio" class="sheet-dots1" name="attr_Dexterity" value="1" checked="checked" /><span></span>
        <input type="radio" class="sheet-dots2" name="attr_Dexterity" value="2" /><span></span>
        <input type="radio" class="sheet-dots3" name="attr_Dexterity" value="3" /><span></span>
        <input type="radio" class="sheet-dots4" name="attr_Dexterity" value="4" /><span></span>
        <input type="radio" class="sheet-dots5" name="attr_Dexterity" value="5" /><span></span>
        <input type="radio" class="sheet-dots6" name="attr_Dexterity" value="6" /><span></span>
        <input type="radio"...

CSS

div.sheet-dots,
input[class^=sheet-dots],
input[class^=sheet-dots] + span {
    width: 265px;
    height: 57px;
}

input[class^=sheet-dots],
input[class^=sheet-dots] + span,
input[class^=sheet-dots] + span::before {
    position: absolute;
    top: 0;
    left: 0;
}

div.sheet-dots {
    display: inline-block;
    position: relative;
    padding: 0;
}

input[class^=sheet-dots] + span {
    display: inline-block;
    z-index: 0;
}

input[class^=sheet-dots] {
    opacity: 0;
    z-index: 1;
}

input.sheet-dots0 { z-index: 2; }

input.sheet-dots0:checked ~ input.sheet-dots1,
input.sheet-dots1:checked ~ input.sheet-dots2,
input.sheet-dots2:checked ~ input.sheet-dots3,
input.sheet-dots3:checked ~ input.sheet-dots4,
input.sheet-dots4:checked ~ input.sheet-dots5,
input.sheet-dots5:checked ~ input.sheet-dots6,
input.sheet-dots6:checked ~ input.sheet-dots7,
input.sheet-dots7:checked ~ input.sheet-dots8,
input.sheet-dots8:checked ~ input.sheet-dots9,
input.sheet-dots9:checked ~ input.sheet-dots10 { z-index: 3; }

input.sheet-dots0:checked + span::before { content: url(http://i.imgur.com/eUXnlQL.gif); }
input.sheet-dots1:checked + span::before { content: url(http://i.imgur.com/B56grPL.gif); }
input.sheet-dots2:checked + span::before { content: url(http://i.imgur.com/OvEM9Nz.gif); }
input.sheet-dots3:checked + span::before { content: url(http://i.imgur.com/JD00nZ8.gif); }
input.sheet-dots4:checked + span::before { content: url(http://i.imgur.com/yQEgEN4.gif); }
input.sheet-dots5:checked + span::before { content: url(http://i.imgur.com/ifyabX6.gif); }
input.sheet-dots6:checked + span::before { content: url(http://i.imgur.com/7zqn2Ah.gif); }
input.sheet-dots7:checked + span::before { content: url(http://i.imgur.com/9qKJMZN.gif); }
input.sheet-dots8:checked + span::before { content: url(http://i.imgur.com/8OOQGjn.gif); }
input.sheet-dots9:checked + span::before { content: url(http://i.imgur.com/doV4Ctw.gif); }
input.sheet-dots10:checked + span::before { content:...