我希望一组单选按钮看起来像一组切换按钮(但仍然像单选按钮一样工作)。它们看起来不像切换按钮。
如何仅使用CSS和HTML执行此操作?
编辑:当选中/取消选中按钮时,我会满意地让小圆圈消失并改变样式。
答案 0 :(得分:114)
根据您希望支持的浏览器,除了隐藏单选按钮外,您还可以使用:checked
pseudo-class选择器。
使用此HTML:
<input type="radio" id="toggle-on" name="toggle" checked
><label for="toggle-on">On</label
><input type="radio" id="toggle-off" name="toggle"
><label for="toggle-off">Off</label>
你可以使用类似下面的CSS:
input[type="radio"].toggle {
display: none;
}
input[type="radio"].toggle:checked + label {
/* Do something special with the selected state */
}
例如,(若要保留自定义CSS简介)如果您使用的是Bootstrap,则可以将class="btn"
添加到<label>
元素并对其进行适当设置以创建一个看起来像的切换像:
...只需要以下额外的CSS:
input[type="radio"].toggle:checked + label {
background-image: linear-gradient(to top,#969696,#727272);
box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
0 1px 2px rgba(0, 0, 0, 0.05);
cursor: default;
color: #E6E6E6;
border-color: transparent;
text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}
input[type="radio"].toggle + label {
width: 3em;
}
input[type="radio"].toggle:checked + label.btn:hover {
background-color: inherit;
background-position: 0 0;
transition: none;
}
input[type="radio"].toggle-left + label {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
input[type="radio"].toggle-right + label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
我在 radio button toggle jsFiddle demo 中加入了这个以及额外的后备风格。请注意,:checked
仅在IE 9中受支持,因此此方法仅限于较新的浏览器。
但是,如果您需要支持IE 8并且愿意依赖JavaScript *,那么您可以毫不费力地破解:checked
的伪支持(尽管您可以直接在其上轻松设置类)那时的标签)。
使用一些快速而又脏的jQuery代码作为 an example of the workaround :
$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
if (this.checked) {
$('input[name="' + this.name + '"].checked').removeClass('checked');
$(this).addClass('checked');
// Force IE 8 to update the sibling selector immediately by
// toggling a class on a parent element
$('.toggle-container').addClass('xyz').removeClass('xyz');
}
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');
然后,您可以对CSS进行一些更改以完成任务:
input[type="radio"].toggle {
/* IE 8 doesn't seem to like to update radio buttons that are display:none */
position: absolute;
left: -99em;
}
input[type="radio"].toggle:checked + label,
input[type="radio"].toggle.checked + label {
/* Do something special with the selected state */
}
*如果您使用的是Modernizr,则可以使用:selector
test来确定是否需要回退。我在示例代码中调用了我的测试“checkedselector”,随后只在测试失败时设置了jQuery事件处理程序。
答案 1 :(得分:59)
这是我上面发布的那个很好的CSS解决方案JS Fiddle示例的版本。
<强> HTML 强>
<div id="donate">
<label class="blue"><input type="radio" name="toggle"><span>$20</span></label>
<label class="green"><input type="radio" name="toggle"><span>$50</span></label>
<label class="yellow"><input type="radio" name="toggle"><span>$100</span></label>
<label class="pink"><input type="radio" name="toggle"><span>$500</span></label>
<label class="purple"><input type="radio" name="toggle"><span>$1000</span></label>
</div>
<强> CSS 强>
body {
font-family:sans-serif;
}
#donate {
margin:4px;
float:left;
}
#donate label {
float:left;
width:170px;
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}
#donate label span {
text-align:center;
font-size: 32px;
padding:13px 0px;
display:block;
}
#donate label input {
position:absolute;
top:-20px;
}
#donate input:checked + span {
background-color:#404040;
color:#F7F7F7;
}
#donate .yellow {
background-color:#FFCC00;
color:#333;
}
#donate .blue {
background-color:#00BFFF;
color:#333;
}
#donate .pink {
background-color:#FF99FF;
color:#333;
}
#donate .green {
background-color:#A3D900;
color:#333;
}
#donate .purple {
background-color:#B399FF;
color:#333;
}
用彩色按钮设计:)
答案 2 :(得分:17)
这是适用于所有浏览器的解决方案(也是IE7和IE8;没有检查IE6):
http://jsfiddle.net/RkvAP/230/
<强> HTML 强>
<div class="toggle">
<label><input type="radio" name="toggle"><span>On</span></label>
</div>
<div class="toggle">
<label><input type="radio" name="toggle"><span>Off</span></label>
</div>
<强> JS 强>
$('label').click(function(){
$(this).children('span').addClass('input-checked');
$(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
});
<强> CSS 强>
body {
font-family:sans-serif;
}
.toggle {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
.toggle label {
float:left;
width:2.0em;
}
.toggle label span {
text-align:center;
padding:3px 0px;
display:block;
cursor: pointer;
}
.toggle label input {
position:absolute;
top:-20px;
}
.toggle .input-checked /*, .bounds input:checked + span works for firefox and ie9 but breaks js for ie8(ONLY) */ {
background-color:#404040;
color:#F7F7F7;
}
使用最小的JS(jQuery,两行)。
答案 3 :(得分:15)
示例图片:
在寻找一些非常干净和直接的东西之后,我最终建立了这个来自another code的一个简单的改变,它只是考虑了复选框,所以我尝试了RADIOS的功能,它也工作了(!)
CSS(SCSS)完全来自@mallendeo(建立在JS学分上),我所做的只是将输入的类型更改为RADIO,并为所有无线电开关指定了相同的名称....和VOILA !!它们会自动停用!!
很干净,正如你所说的那样只有CSS和HTML !!
这正是我在尝试和编辑十几个选项(大多数需要jQuery,或者不允许使用标签,甚至不能与当前浏览器兼容)后3天内寻找的内容。这一切都搞定了!
我有义务在这里包含代码,以便您查看一个有效的示例,所以:
/** Toggle buttons
* @mallendeo
* forked @davidtaubmann
* from https://codepen.io/mallendeo/pen/eLIiG
*/
html, body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: sans-serif;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.tg-list {
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.tg-list-item {
margin: 0 10px;;
}
h2 {
color: #777;
}
h4 {
color: #999;
}
.tgl {
display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
background: none;
}
.tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.tgl + .tgl-btn:after {
left: 0;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn:after {
left: 50%;
}
.tgl-light + .tgl-btn {
background: #f0f0f0;
border-radius: 2em;
padding: 2px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.tgl-light + .tgl-btn:after {
border-radius: 50%;
background: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn {
background: #9FD6AE;
}
.tgl-ios + .tgl-btn {
background: #fbfbfb;
border-radius: 2em;
padding: 2px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
border-radius: 2em;
background: #fbfbfb;
-webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
will-change: padding;
}
.tgl-ios + .tgl-btn:active {
box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
padding-right: .8em;
}
.tgl-ios:checked + .tgl-btn {
background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
margin-left: -.8em;
}
.tgl-skewed + .tgl-btn {
overflow: hidden;
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .2s ease;
transition: all .2s ease;
font-family: sans-serif;
background: #888;
}
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
-webkit-transform: skew(10deg);
transform: skew(10deg);
display: inline-block;
-webkit-transition: all .2s ease;
transition: all .2s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tgl-skewed + .tgl-btn:after {
left: 100%;
content: attr(data-tg-on);
}
.tgl-skewed + .tgl-btn:before {
left: 0;
content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
background: #888;
}
.tgl-skewed + .tgl-btn:active:before {
left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
background: #86d993;
}
.tgl-skewed:checked + .tgl-btn:before {
left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
left: 10%;
}
.tgl-flat + .tgl-btn {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: #fff;
border: 4px solid #f2f2f2;
border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: #f2f2f2;
content: "";
border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
border: 4px solid #7FC6A6;
}
.tgl-flat:checked + .tgl-btn:after {
left: 50%;
background: #7FC6A6;
}
.tgl-flip + .tgl-btn {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
font-family: sans-serif;
-webkit-perspective: 100px;
perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
display: inline-block;
-webkit-transition: all .4s ease;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
<h2>Toggle 'em</h2>
<ul class='tg-list'>
<li class='tg-list-item'>
<h3>Radios:</h3>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='rd1'>
<h4>Light</h4>
</label>
<input class='tgl tgl-light' id='rd1' name='group' type='radio'>
<label class='tgl-btn' for='rd1'></label>
<label class='tgl-btn' for='rd1'>
<h4>Light</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='rd2'>
<h4>iOS 7 (Disabled)</h4>
</label>
<input checked class='tgl tgl-ios' disabled id='rd2' name='group' type='radio'>
<label class='tgl-btn' for='rd2'></label>
<label class='tgl-btn' for='rd2'>
<h4>iOS 7 (Disabled)</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='rd3'>
<h4>Skewed</h4>
</label>
<input class='tgl tgl-skewed' id='rd3' name='group' type='radio'>
<label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='rd3'></label>
<label class='tgl-btn' for='rd3'>
<h4>Skewed</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='rd4'>
<h4>Flat</h4>
</label>
<input class='tgl tgl-flat' id='rd4' name='group' type='radio'>
<label class='tgl-btn' for='rd4'></label>
<label class='tgl-btn' for='rd4'>
<h4>Flat</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='rd5'>
<h4>Flip</h4>
</label>
<input class='tgl tgl-flip' id='rd5' name='group' type='radio'>
<label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='rd5'></label>
<label class='tgl-btn' for='rd5'>
<h4>Flip</h4>
</label>
</li>
</ul>
<ul class='tg-list'>
<li class='tg-list-item'>
<h3>Checkboxes:</h3>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='cb1'>
<h4>Light</h4>
</label>
<input class='tgl tgl-light' id='cb1' type='checkbox'>
<label class='tgl-btn' for='cb1'></label>
<label class='tgl-btn' for='cb1'>
<h4>Light</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='cb2'>
<h4>iOS 7</h4>
</label>
<input class='tgl tgl-ios' id='cb2' type='checkbox'>
<label class='tgl-btn' for='cb2'></label>
<label class='tgl-btn' for='cb2'>
<h4>iOS 7</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='cb3'>
<h4>Skewed</h4>
</label>
<input class='tgl tgl-skewed' id='cb3' type='checkbox'>
<label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>
<label class='tgl-btn' for='cb3'>
<h4>Skewed</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='cb4'>
<h4>Flat</h4>
</label>
<input class='tgl tgl-flat' id='cb4' type='checkbox'>
<label class='tgl-btn' for='cb4'></label>
<label class='tgl-btn' for='cb4'>
<h4>Flat</h4>
</label>
</li>
<li class='tg-list-item'>
<label class='tgl-btn' for='cb5'>
<h4>Flip</h4>
</label>
<input class='tgl tgl-flip' id='cb5' type='checkbox'>
<label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>
<label class='tgl-btn' for='cb5'>
<h4>Flip</h4>
</label>
</li>
</ul>
如果您运行该代码段,您会看到我选中并禁用了iOS广播,因此您可以在激活其他广告时观看其受影响的方式。我还为每个收音机添加了2个标签,一个在前,一个在后。还包括在同一窗口中显示工作复选框的原始代码副本。
答案 4 :(得分:1)
我通常使用CSS隐藏真正的单选按钮(或将它们分成单独的隐藏输入),放入我想要的图像(您可以使用无序列表并将样式应用于li元素)然后使用单击事件来切换输入。这种方法还意味着您可以让不在普通网络浏览器上的用户访问 - 只需默认隐藏您的ul并显示单选按钮。
答案 5 :(得分:1)
我知道这是一个老问题,但由于我只是想做到这一点,我想我会发布我最终的结果。因为我使用的是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'));
});
});
我选择将值存储在隐藏字段中,以便我很容易获得服务器端的值。
答案 6 :(得分:-2)
$(document).ready(function () {
$('#divType button').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('#<%= hidType.ClientID%>').val($(this).data('value'));
//alert($(this).data('value'));
});
});
<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>
答案 7 :(得分:-3)
HTML:
<div>
<label> <input type="radio" name="toggle"> On </label>
<label> Off <input type="radio" name="toggle"> </label>
</div>
CSS:
div { overflow:auto; border:1px solid #ccc; width:100px; }
label { float:left; padding:3px 0; width:50px; text-align:center; }
input { vertical-align:-2px; }