如何使用引导程序使表格内的单选按钮看起来像一个按钮？

Posted 2023-03-27

【中文标题】如何使用引导程序使表格内的单选按钮看起来像一个按钮？

【英文标题】：How to make a radio button that is inside a table look like a buttton using bootstrap?

【发布时间】：2020-11-01 07:14:26

【问题描述】：

我还不能解决一个关于引导程序的问题，但我希望有人能给我一些建议来解决它:)

我有一个表格，其中显示了用户可以选择的不同选项。我使用单选按钮来显示不同的选项，因为我只想选择其中一个选项。

我在使用单选按钮时遇到的问题是我不想显示圆圈。

这就是我所拥有的

What I have

这就是我想要的 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"> &ge;0.50
          </label>
        </td>
      </div>
    </tr>
  </tbody>
</table>

【参考方案1】：

这是一个基于this tutorial的解决方案。

您绝对可以通过使用他们提出的其他一些建议来改进它（例如 :hover 和 :focus 的样式）——出于美观和可访问性的原因，我建议这样做。

单选按钮被隐藏，带有 opacity: 0 和 width: 0，标签覆盖它们是因为 position: fixed（这需要将 position 设置为 @ 以外的其他值的祖先987654328@)

因为标签紧跟在标记中的输入元素之后，所以当隐藏的输入通过.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">&ge;0.50</label>
        </td>
      </div>
    </tr>
  </tbody>
</table>

【讨论】：

非常感谢你，猫！这真的很有帮助:)

【参考方案2】：

检查这个例子，它有效。

div label input 
   margin-right:100px;

body 
    font-family:sans-serif;


#ck-button 
    margin:4px;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;


#ck-button:hover 
    border:1px solid red;


#ck-button label 
    float:left;
    width:4.0em;


#ck-button label span 
    text-align:center;
    padding:3px 0px;
    display:block;


#ck-button label input 
    position:absolute;
    top:-20px;


#ck-button input:checked + span 
  border: 1px solid blue;

<div id="ck-button">
  <label>
     <input type="radio" value="1"><span>red</span>
  </label>
</div>

【讨论】：

代码不包含或模拟单选按钮。你能解释一下“它有效”是什么意思吗？

感谢您的回答 Sameera！它的工作，但选择时，瓶子的按钮颜色部分，而不是它的100％ span>

抱歉我没看到图片，希望现在是正确的