我希望一组单选按钮看起来像一组切换按钮(但功能仍然像单选按钮)。没有必要让它们看起来完全像切换按钮。
我怎么能只用CSS和HTML来做这件事呢?
编辑:当按钮被选中/取消选中时,我会满意地使小圆圈消失并更改样式。
发布于 2020-05-08 09:44:37
灵感来自Michal B.答案。如果使用bootstrap..
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;
}
<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>
发布于 2011-04-02 22:37:01
我通常使用CSS隐藏真正的单选按钮(或者将它们设置为单独的隐藏输入),放入我想要的图像(您可以使用无序列表并将样式应用于li元素),然后使用click事件切换输入。这种方法还意味着,你可以让那些不在普通浏览器上的用户访问这些东西--只需默认隐藏你的用户界面,并显示单选按钮。
发布于 2017-09-04 08:20:01
我知道这是一个古老的问题,但由于我只是想要这样做,所以我想我应该把我最终得到的东西发布出来。因为我使用的是Bootstrap,所以我选择了Bootstrap选项。
HTML
<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
$(document).ready(function () {
$('#divType button').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('#<%= hidType.ClientID%>').val($(this).data('value'));
//alert($(this).data('value'));
});
});
我选择将值存储在一个隐藏字段中,这样我就可以很容易地在服务器端获得值。
https://stackoverflow.com/questions/5523735
复制相似问题