Has anyone built a 3 value toggle? obviously this has to be CSS only to work in a Roll20 character sheet.
I suppose a radio button behind it is the right choice, but how to set it so only the 'next' radio is displayed for the user?
I am thinking something along these lines:
and in css something like this? actually this could be n-way now that I think of it:
can we use the CSS pseudoclasses :in-range and :out-of-range ? It looks like they are supported by Chrome, Firefox, and even MS Edge. But I don't see any examples in the CSS Wizardry. There are a number of number inputs which we read via javascript and then set associated checkboxes. If we don't have to do that but just use :in-range and :out-of-range .. i suppose that would lower the # of attributes and make the sheet appear faster.
oh .. nevermind it does not do what I thought it does, I thought we could set the range :in-range(1-2)
I suppose a radio button behind it is the right choice, but how to set it so only the 'next' radio is displayed for the user?
I am thinking something along these lines:
<input type="checkbox" name="attr_3way" value="3" class="sheet-3way" style="display:none;"/>
<input type="radio" name="attr_3way" value="1" class="sheet-3way sheet-3way_val1" />
<input type="radio" name="attr_3way" value="2" class="sheet-3way sheet-3way_val2" />
<input type="radio" name="attr_3way" value="3" class="sheet-3way sheet-3way_val3" />
<div class="sheet-div_to_affect" ></div>
and in css something like this? actually this could be n-way now that I think of it:
.sheet-3way {
opacity:0;
width:1em;
}
.sheet-3way:not(:last-child) {
margin-right:-1em;
}
.sheet-3way:checked + .sheet-3way {
z-index:99;
}
.sheet-3way:checked, .sheet-3way:checked + .sheet-3way ~ .sheet-3way {
z-index:0;
}
Second Question
oh .. nevermind it does not do what I thought it does, I thought we could set the range :in-range(1-2)
