我还无法解决有关 Bootstrap 的问题,但我希望有人能给我一些建议来解决它:)
我有一个表格,其中显示用户可以选择的不同选项。我使用单选按钮来显示不同的选项,因为我只想选择其中一个选项。
使用单选按钮时遇到的问题是我不希望显示圆圈。
这是我所拥有的
这就是我想要的 what I want
我试图放置一个包含一行按钮的div来应用class="btn-group btn-group-toggle" data-toggle="buttons"
但我无法让它发挥作用。如果我将该代码写在 <tr>
中标签,它可以工作,但是上面的行移到了屏幕的右侧。
另外,我尝试使用css来隐藏圆圈
input[type=radio]{
visibility: hidden;
}
但按钮内的文本未居中
非常感谢您的宝贵时间和帮助!
这是我的代码:
<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>
<label class="btn btn-outline-primary">
<input type="radio" name="z" id="Zop1" value="0.15"> 0.15
</label>
</td>
<td>
<label class="btn btn-outline-primary">
<input type="radio" name="z" id="Zop2" value="0.25"> 0.25
</label>
</td>
<td>
<label class="btn btn-outline-primary">
<input type="radio" name="z" id="Zop3" value="0.30"> 0.30
</label>
</td>
<td>
<label class="btn btn-outline-primary">
<input type="radio" name="z" id="Zop4" value="0.35"> 0.35
</label>
</td>
<td>
<label class="btn btn-outline-primary">
<input type="radio" name="z" id="Zop5" value="0.40"> 0.40
</label>
</td>
<td>
<label class="btn btn-outline-primary">
<input type="radio" name="z" id="Zop6" value="0.50"> ≥0.50
</label>
</td>
</div>
</tr>
</tbody>
</table>
最佳答案
这是基于 this tutorial 的解决方案.
您绝对可以通过使用他们提出的一些其他建议(例如 :hover
和 :focus
上的样式)来改进它 - 出于美观和可访问性的原因,我建议这样做。
单选按钮已隐藏,并带有 opacity: 0
和width: 0
,并且标签覆盖了它们,因为 position: fixed
(这需要将 position
设置为 static
以外的值的祖先)
由于标签紧随标记中的输入元素,因此当通过.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>
关于javascript - 如何使用 Bootstrap 使表格内的单选按钮看起来像按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62853031/