如何使单选button看起来像一个切换button
我想要一组单选button看起来像一组切换button（但仍然像单选button一样）。 他们没有必要看起来像切换button。
我怎样才能做到这一点只有CSS和HTML？
编辑：我会满意使这个小圆圈消失，并改变风格时，button被选中/取消选中。
根据您所支持的浏览器，除了隐藏单选button之外，还可以使用:checked伪类别select器。
使用这个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 */ }
例如，如果您使用的是Bootstrap （保留自定义的CSS简介），您可以将class="btn"添加到<label>元素中，并适当地设置它们的样式，以创build如下所示的切换：
…只需要以下额外的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; }
我已经包括这个以及在单选button切换jsFiddle演示额外的备用样式。 请注意:checked只有在IE 9中支持:checked ，所以这种方法仅限于较新的浏览器。
但是，如果您需要支持IE 8并且愿意回退JavaScript *，则可以伪造伪支持:checked没有太多困难（尽pipe您可以在该点上直接在标签上直接设置类） 。
使用一些快速和肮脏的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 */ }
*如果您使用Modernizr，则可以使用:selectortesting来帮助确定是否需要回退。 我在示例代码中调用了我的testing“checkedselector”，随后仅在testing失败时才设置jQuery事件处理程序。
这是我上面发布的CSS解决schemeJS 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; }
风格与彩色button:)
这是适用于所有浏览器（也是IE7和IE8，不检查IE6）的解决scheme：
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，两行）。
纯粹的CSS和HTML（问）
示例图像：
在寻找真正干净而直截了当的东西之后，我最终用另一个只考虑了checkbox的代码做了一个简单的改变，所以我尝试了RADIOS的funcionality，它也工作得很好（！）。
CSS（SCSS）完全来自@mallendeo（就像在JS学分中所build立的那样），我所做的只是将input的types改为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>
我通常使用CSS来隐藏真正的单选button（或者将它们变成单独的隐藏input），放入我想要的图像（您可以使用无序列表并将样式应用于li元素），然后使用单击事件切换input。 这种方法也意味着你可以让那些不在正常的网页浏览器上的用户访问这些东西 – 默认隐藏你的ul并显示单选button。
我知道这是一个古老的问题，但是因为我只是想要这样做，所以我想我会发布我最终的结果。 因为我正在使用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')); }); });
我select将值存储在隐藏字段中，以便我可以轻松地获取服务器端的值。
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/
