为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

侃侃尔雅 2022-11-11 13:43:19

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

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

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

这是我所拥有的

我有的

这是 我想要的

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

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

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

但按钮内的文字没有居中

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


查看完整描述

2 回答

?
汪汪一只猫

TA贡献1629条经验 获得超8个赞

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


您绝对可以通过使用他们提出的其他一些建议(例如在: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>


查看完整回答
反对 回复 2022-11-11
?
米脂

TA贡献1597条经验 获得超3个赞

检查这个例子,它有效。


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>


查看完整回答
反对 回复 2022-11-11
  • 2 回答
  • 0 关注
  • 20 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信