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: <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 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)