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

Question

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

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

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

这是我所拥有的

我有的

这是 我想要的

我试图放置一个包含一排要应用的按钮的 div，class="btn-group btn-group-toggle" data-toggle="buttons"但我没有让它工作。如果我在标签中编写该代码<tr>，它可以工作，但上面的行会移到屏幕的右侧。

另外，我尝试使用 css 隐藏圆圈

input[type=radio]{ 
  visibility: hidden;}

但按钮内的文字没有居中

非常感谢您的时间和帮助！

Answer 1

这是基于本教程的解决方案。

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

单选按钮用opacity: 0and隐藏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">&ge;0.50</label>

        </td>

      </div>

    </tr>

  </tbody>

</table>

Answer 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>