首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使单选按钮看起来像切换按钮

如何使单选按钮看起来像切换按钮
EN

Stack Overflow用户
提问于 2011-04-02 22:31:45
回答 4查看 155.7K关注 0票数 75

我希望一组单选按钮看起来像一组切换按钮(但功能仍然像单选按钮)。没有必要让它们看起来完全像切换按钮。

我怎么能只用CSS和HTML来做这件事呢?

编辑:当按钮被选中/取消选中时,我会满意地使小圆圈消失并更改样式。

EN

回答 4

Stack Overflow用户

发布于 2020-05-08 09:44:37

灵感来自Michal B.答案。如果使用bootstrap..

代码语言:javascript
复制
label.btn {
  padding: 0;
}

label.btn input {
  opacity: 0;
  position: absolute;
}

label.btn span {
  text-align: center;
  padding: 6px 12px;
  display: block;
}

label.btn input:checked+span {
  background-color: rgb(80, 110, 228);
  color: #fff;
}
代码语言:javascript
复制
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>One</span></label>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Two</span></label>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Three</span></label>
</div>

票数 3
EN

Stack Overflow用户

发布于 2011-04-02 22:37:01

我通常使用CSS隐藏真正的单选按钮(或者将它们设置为单独的隐藏输入),放入我想要的图像(您可以使用无序列表并将样式应用于li元素),然后使用click事件切换输入。这种方法还意味着,你可以让那些不在普通浏览器上的用户访问这些东西--只需默认隐藏你的用户界面,并显示单选按钮。

票数 1
EN

Stack Overflow用户

发布于 2017-09-04 08:20:01

我知道这是一个古老的问题,但由于我只是想要这样做,所以我想我应该把我最终得到的东西发布出来。因为我使用的是Bootstrap,所以我选择了Bootstrap选项。

HTML

代码语言:javascript
复制
<div class="col-xs-12">
    <div class="form-group">
        <asp:HiddenField ID="hidType" runat="server" />
        <div class="btn-group" role="group" aria-label="Selection type" id="divType">
            <button type="button" class="btn btn-default BtnType" data-value="1">Food</button>                        
            <button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
        </div>
    </div>
</div>

jQuery

代码语言:javascript
复制
$(document).ready(function () {
    $('#divType button').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('#<%= hidType.ClientID%>').val($(this).data('value'));
        //alert($(this).data('value'));             
    });
});

我选择将值存储在一个隐藏字段中,这样我就可以很容易地在服务器端获得值。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5523735

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档