GG, That's why I called it a pseudo select. Here's what the technique looks like (with very little in the way of styling): HTML <div class='pseudo-select-test'>
<span>Acrobatics</span> <input type='number' name='attr_acrobatics' value='0'>
<span>Athletics</span> <input type='number' name='attr_athletics' value='0'>
<input type='text' name='attr_custom_skill_1_name' value='Custom Skill 1'><input type='number' name='attr_custom_skill_1' value='0'>
<input type='text' name='attr_custom_skill_2_name' value='Custom Skill 2'><input type='number' name='attr_custom_skill_2' value='0'>
<input type='text' name='attr_custom_skill_3_name' value='Custom Skill 3'><input type='number' name='attr_custom_skill_3' value='0'>
<div class='pseudo-select'>
<input class='select-filter' type='hidden' name='attr_pseudo_select' value='@{acrobatics}'>
<label class='acrobatics'><input type='radio' name='attr_pseudo_select' value='@{acrobatics}' checked><span>Acrobatics</span></label>
<label class='athletics'><input type='radio' name='attr_pseudo_select' value='@{athletics}'><span>Athletics</span></label>
<label class='custom_skill_1'><input type='radio' name='attr_pseudo_select' value='@{custom_skill_1}'><input type='text' name='attr_custom_skill_1_name' value='Custom Skill 1'></label>
<label class='custom_skill_2'><input type='radio' name='attr_pseudo_select' value='@{custom_skill_2}'><input type='text' name='attr_custom_skill_2_name' value='Custom Skill 2'></label>
<label class='custom_skill_3'><input type='radio' name='attr_pseudo_select' value='@{custom_skill_3}'><input type='text' name='attr_custom_skill_3_name' value='Custom Skill 3'></label>
</div>
</div> CSS .sheet-pseudo-select-test{
display:grid;
grid-template-columns:[selection-start]auto[selection-end] 1fr;
grid-template-rows:repeat(5,1fr) [selection-start]auto[selection-end];
grid-gap:5px;
}
.sheet-pseudo-select{
display:grid;
grid-template-columns:1fr;
grid-area:selection;
min-height:20px;
outline:1px solid black;
}
.sheet-pseudo-select label{
position:relative;
width:200px;
display:none;
}
.sheet-pseudo-select:hover label,
.sheet-pseudo-select .sheet-select-filter[value*="acrobatics"] ~ .sheet-acrobatics,
.sheet-pseudo-select .sheet-select-filter[value*="athletics"] ~ .sheet-athletics,
.sheet-pseudo-select .sheet-select-filter[value*="custom_skill_1"] ~ .sheet-custom_skill_1,
.sheet-pseudo-select .sheet-select-filter[value*="custom_skill_2"] ~ .sheet-custom_skill_2,
.sheet-pseudo-select .sheet-select-filter[value*="custom_skill_3"] ~ .sheet-custom_skill_3{
display:initial;
}
.sheet-pseudo-select label input[type=radio]{
z-index:2;
opacity:0;
position:absolute;
}
.sheet-pseudo-select label *{
width:100%;
height:100%;
display:block;
}
.sheet-pseudo-select input[type=text]{
z-index:-1;
background:none;
box-shadow:none;
border:0px solid transparent;
}
.sheet-pseudo-select label input[type=radio]:checked + input,
.sheet-pseudo-select label input[type=radio]:checked + span{
background-color:green!important;
} Final Product (gif) Jakob, how would you do this with repeating items? EDIT: Note that I'm sure Jakob has a more elegant way to do this.
