I'm writing a custom WoD Sheet for a multi-splash-crossover. There I will have multiple "pools" of temporary points, which I want to fill from the left, so if the 3rd box is checked, the 1st and 2nd should also be checked. This works and is all I need for most pools, that go to a maximum of 10 with a similiar behaving permanent value right above like this: (And yes it is based on the V20 sheet by Matt Zaldivar) The Problem is especially with the Blood Pool: It should be able to go up to 50, but most players will have only the ability to have 10 to 15 points, others only 2 to 3, so I want only show them this amount of boxes, based on the amount they put into a number field. The problem is - the boxes disappear, but don't reappear. There is quite a lot of code, I hope I don't miss something that messes with it and don't post too much: html: (yeah until now there are 10 points, because I wanted to confirm it works before I copy, paste and change the value up to 50) <div class="line-heading"><span class="line-heading">Blood Pool</span></div>
<div class="pool-row">
<input type="number" name="attr_BloodPool_max" value="10"/>
</div>
<div class="pool-row zero blood">
<input type="hidden" name="attr_BloodPool_max" />
<input type="radio" name="attr_bloodpool" value="0" class="zero trait-check" checked /><span></span>
<input type="radio" name="attr_bloodpool" value="1" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="2" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="3" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="4" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="5" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="6" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="7" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="8" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="9" class="temp trait-check"/><span></span>
<input type="radio" name="attr_bloodpool" value="10" class="temp trait-check"/><span></span>
</div> And the css up until now: /*Radios Fill to the left*/
/* Hide actual dot*/
input.trait-radio[type="radio"],
input.zero[type="radio"],
input.temp[type="radio"] {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* Styles common to fake dot*/
input.trait-radio[type="radio"] + span::before,
input.zero[type="radio"] + span::before,
input.temp[type="radio"] + span::before{
margin-right: 1px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
content: "";
width: 12px;
height: 12px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
background: #000000;
}
/* Remove dot from all radios _after_ selected one */
input.trait-radio[type="radio"]:checked ~ input.trait-radio[type="radio"] + span::before,
input.zero[type="radio"]:checked ~ input[type="radio"] + span::before,
input.temp[type="radio"]:checked ~ input[type="radio"] + span::before {
content: "";
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
/*Special radios*/
input.temp.trait-check+span::before {
content: "X";
width: 12px;
height: 12px;
font-size: 12px;
-moz-border-radius: 0%;
-webkit-border-radius: 0%;
border-radius: 0%;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
input.zero.trait-check:checked + span::before {
opacity: 0;
}
input.zero.trait-check:hover + span::before {
opacity: 1;
}
input.zero.trait-check + span::before {
opacity: .25;
font-size: 12px;
content: "X";
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
} So to hide the "checkboxes" I startet code like this (its not complete, because I first wanted to confirm it works before I type it up to 50 times (or even 10 first)) CSS: div.blood > input.temp[type="radio"] + span::before {
display: none;
}
div.blood > input[type="hidden"][value="1"] ~ input.temp[type="radio"]:nth-of-type(-n+1) + span::before {
display: inline-block;
}
div.blood > input[type="hidden"][value="2"] ~ input.temp[type="radio"]:nth-of-type(-n+2) + span::before {
display: inline-block;
} I'm not a very experienced programmer, but as far as I understand it, it should work... is there a small mistake I'm missing or is my approach wrong?
