如何使单选按钮看起来像一个开关按钮

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

我如何才能做到这一点只有 CSS 和 HTML？

编辑: 我将满足使小圆消失和改变样式时，按钮被选中/未选中。

161551 次浏览
小开

我通常用 CSS 隐藏真正的单选按钮(或者将它们变成单独的隐藏输入) ，放入我想要的图像(你可以使用一个无序列表并将你的样式应用到 li 元素) ，然后使用单击事件来切换输入。这种方法也意味着你可以让那些不使用普通网页浏览器的用户访问你的网页——只需要默认隐藏你的 ul 并显示单选按钮。

小开

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; }

现场演示: http://jsfiddle.net/scymE/1/”rel = “ nofollow”> http://jsfiddle.net/scyme/1/

小开
最佳答案

除了隐藏单选按钮之外，还可以使用 :checked伪类选择器，这取决于您希望支持的浏览器。

使用此 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 简洁)如果您使用的是 鞋带，您可以将 class="btn"添加到您的 <label>元素中，并对它们进行适当的样式设置，以创建一个类似于下面这样的切换:

Bootstrap-aided radio toggle

只需要额外的 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;
}

我已经包括了这个以及额外的备份样式在一个 单选按钮切换 jsFiddle demo。注意，只有 IE9支持 :checked，因此这种方法仅限于较新的浏览器。

然而，如果你需要支持 IE 8，并且愿意使用 JavaScript * ，你可以很容易地为 :checked编写伪支持(尽管你也可以很容易地在标签上直接设置类)。

使用一些快速的 jQuery 代码作为 一个解决方案的例子:

$('.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 */
}

* 如果你正在使用现代化，你可以使用 :selector测试来帮助确定你是否需要后退。我在示例代码中称我的测试为“ checkedselector”，随后只有在测试失败时才设置 jQuery 事件处理程序。

小开

下面是适用于所有浏览器的解决方案(也适用于 IE7和 IE8; 没有检查 IE6) :

Http://jsfiddle.net/rkvap/230/

超文本标示语言

<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，两行)。

小开

以下是上面提到的 CSS 解决方案 JS Fiddle 示例的版本。

Http://jsfiddle.net/496c9/

超文本标示语言

<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;
}

有彩色纽扣的款式:)

小开

纯 CSS 和 HTML (按要求)与动画! (和复选框也!)

示例图片(您可以运行下面的代码) :

Toggle Buttons (Radio and Checkbox) in Pure CSS and HTML

在寻找一些真正干净和直接的东西后，我结束了构建这个与 另一个密码的一个简单的改变，建立在只考虑复选框，所以我尝试了 RADIOS 的功能，它也工作(!).

CSS (SCSS)完全来自@mallendeo (根据 JS 演职员表建立) ，我所做的只是简单地将输入类型改为 RADIO，并给所有的无线电交换机起了相同的名字... ..。瞧！它们会自动解除一个传给另一个! ！

非常干净，正如您所要求的，它只是 CSS 和 HTML! ！

这正是我在尝试和编辑了超过12个选项(大部分都需要 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个标签，每个电台，一前一后。还包括显示同一窗口中的工作复选框的原始代码的副本。

小开

我知道这是个老问题，但既然我只是想做这个，我想我应该发布我最终得到的东西。因为我正在使用 Bootstrap，所以我选择了 Bootstrap 选项。

超文本标示语言

<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'));
});
});

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

小开

灵感来自 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>

小开 

$(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>


提交答案