I'm coding the character sheet for Fate of the Norns. In this game you can assign runes to abilities and when you draw that rune you can play that ability. In the new edition of the game you can assign multiple runes to the same ability to increase your chances of drawing it. Previously, I had a select element that let you choose the rune for an ability. I was hoping I could just add the "multiple" attribute and allow for multi-select. This seems to work in base html (I don't write much html outside of roll20 so I'm not sure, but w3schools leads me to believe so). I've actually changed my approach here to use CSS magic "dropdown" menus with checkboxes, but now I am encountering a different issue. I've got everything to work with a single menu, but when I put it in a repeating section the menu flickers and goes crazy (code follows). I think this is because the css can't distinguish between the two repeating sections. I think I am going to start a new thread on this. <fieldset class="repeating_runes">
<div class="container">
<div class="child">
<input type="checkbox" name="attr_void" class="rune void" value="void" />
<span>&#x16F1;</span>
<input type="checkbox" name="attr_fehu" class="rune fehu" value="fehu" />
<span>&#x16A0;</span>
<input type="checkbox" name="attr_uruz" class="rune uruz" value="uruz" />
<span>&#x16A2;</span>
<input type="checkbox" name="attr_thurisaz" class="rune thurisaz" value="thurisaz" />
<span>&#x16A6;</span>
<input type="checkbox" name="attr_cansuz" class="rune cansuz" value="cansuz" />
<span>&#x16A8;</span>
<input type="checkbox" name="attr_raidho" class="rune raidho" value="raidho" />
<span>&#x16B1;</span>
<input type="checkbox" name="attr_kenaz" class="rune kenaz" value="kenaz" />
<span>&#x16B2;</span>
<input type="checkbox" name="attr_gebgift" class="rune gebgift" value="gebgift" />
<span>&#x16B7;</span>
<input type="checkbox" name="attr_wunjo" class="rune wunjo" value="wunjo" />
<span>&#x16B9;</span>
<input type="checkbox" name="attr_hagalaz" class="rune hagalaz" value="hagalaz" />
<span>&#x16BA;</span>
<input type="checkbox" name="attr_naudhneed" class="rune naudhneed" value="naudhneed" />
<span>&#x16BE;</span>
<input type="checkbox" name="attr_isaice" class="rune isaice" value="isaice" />
<span>&#x16C1;</span>
<input type="checkbox" name="attr_jethe" class="rune jethe" value="jethe" />
<span>&#x16C3;</span>
<input type="checkbox" name="attr_eihwas" class="rune eihwas" value="eihwas" />
<span>&#x16C7;</span>
<input type="checkbox" name="attr_pertho" class="rune pertho" value="pertho" />
<span>&#x16C8;</span>
<input type="checkbox" name="attr_elhaz" class="rune elhaz" value="elhaz" />
<span>&#x16C9;</span>
<input type="checkbox" name="attr_sowsun" class="rune sowsun" value="sowsun" />
<span>&#x16CA;</span>
<input type="checkbox" name="attr_tiwaz" class="rune tiwaz" value="tiwaz" />
<span>&#x16CF;</span>
<input type="checkbox" name="attr_berkano" class="rune berkano" value="berkano" />
<span>&#x16D2;</span>
<input type="checkbox" name="attr_ehwo" class="rune ehwo" value="ehwo" />
<span>&#x16D6;</span>
<input type="checkbox" name="attr_mann" class="rune mann" value="mann" />
<span>&#x16D7;</span>
<input type="checkbox" name="attr_claguz" class="rune claguz" value="claguz" />
<span>&#x16D9;</span>
<input type="checkbox" name="attr_dagaz" class="rune dagaz" value="dagaz" />
<span>&#x16DE;</span>
<input type="checkbox" name="attr_ing" class="rune ing" value="ing" />
<span>&#x16DD;</span>
<input type="checkbox" name="attr_othala" class="rune othala" value="othala" />
<span>&#x16DF;</span>
</div>
</div>
</fieldset> .sheet-container {
width: 100px;
}
.sheet-container,
.sheet-child {
display: inline-block;
}
.sheet-child {
vertical-align: middle;
width: 100px;
height: 100px;
}
.sheet-child input,
.sheet-child input + span {
display: none;
}
.sheet-child:hover {
background: LightGray;
position:absolute;
width: 100px;
height: auto;
z-index: 0;
padding: 0px;
}
/*.sheet-child:hover > div.sheet-void {
display: none;
}*/
.sheet-child:hover input,
.sheet-child:hover input + span {
display: inline;
}
.sheet-child:hover input + span {
margin-right: 5%
}
.sheet-child:hover span {
display: inline;
}
.sheet-child:not(:hover) input.sheet-rune.sheet-void:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-fehu:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-tiwaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-berkano:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-ehwo:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-mann:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-claguz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-ing:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-dagaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-othala:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-hagalaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-naudhneed:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-isaice:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-jethe:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-eihwas:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-pertho:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-elhaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-sowsun:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-thurisaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-cansuz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-raidho:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-kenaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-gebgift:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-wunjo:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-uruz:checked + span {
display: inline-block;
}