這是基于本教程的解決方案。
您絕對(duì)可以通過使用他們提出的其他一些建議（例如在:hover和上設(shè)置樣式:focus）來改進(jìn)它——出于美觀和可訪問性的原因，我建議這樣做。
單選按鈕用opacity: 0and隱藏width: 0，標(biāo)簽覆蓋它們是因?yàn)閜osition: fixed（這需要一個(gè)祖先position設(shè)置為 以外的東西static）
因?yàn)闃?biāo)簽緊跟在標(biāo)記中的輸入元素之后，所以當(dāng)隱藏的輸入通過.better-radio:checked + label.
.better-radio {
opacity: 0;
position: fixed;
width: 0;
}
label {
display: inline-block;
padding: 10px 20px;
border: 1px solid black;
border-radius: 4px;
background-color: lightgrey;
}
.better-radio:checked + label {
background-color: lightgreen;
border-color: green;
}
<table class="table table-responsive">
<thead class="thead-light">
<tr>
<th scope="col">Zona Sísmica</th>
<th scope="col">I</th>
<th scope="col">II</th>
<th scope="col">III</th>
<th scope="col">IV</th>
<th scope="col">V</th>
<th scope="col">VI</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Valor factor Z</th>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<td>
<input class="better-radio" type="radio" name="z" id="zop1" value="0.15" />
<label for="zop1" class="btn btn-outline-primary">0.15</label>
</td>
<td>
<input class="better-radio" type="radio" name="z" id="zop2" value="0.25" />
<label for="zop2" class="btn btn-outline-primary">0.25</label>
</td>
<td>
<input class="better-radio" type="radio" name="z" id="zop3" value="0.30" />
<label for="zop3" class="btn btn-outline-primary">0.30</label>
</td>
<td>
<input class="better-radio" type="radio" name="z" id="zop4" value="0.35" />
<label for="zop4" class="btn btn-outline-primary">0.35</label>
</td>
<td>
<input class="better-radio" type="radio" name="z" id="zop5" value="0.40" />
<label for="zop5" class="btn btn-outline-primary">0.40</label>
</td>
<td>
<input class="better-radio" type="radio" name="z" id="zop6" value="0.50" />
<label for="zop6" class="btn btn-outline-primary">≥0.50</label>
</td>
</div>
</tr>
</tbody>
</table>
