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

Question

我希望一组单选按钮看起来像一组切换按钮（但仍然像单选按钮一样工作）。它们不必看起来完全像切换按钮。

我怎样才能只使用 CSS 和 HTML 来做到这一点？

编辑：当检查/未选中按钮时，我将满足使小圆圈消失并更改样式。

原文由 Pomber 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 简短）如果您使用的是 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;
}

我在 单选按钮切换 jsFiddle 演示 中包含了这个以及额外的回退样式。请注意， :checked 仅在 IE 9 中受支持，因此此方法仅限于较新的浏览器。

但是，如果您需要支持 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 */
}

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

原文由 Tim Stone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我上面发布的那个不错的 CSS 解决方案 JS Fiddle 示例的版本。

http://jsfiddle.net/496c9/

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

带有彩色按钮的样式 :)

原文由 Simon Darby 发布，翻译遵循 CC BY-SA 3.0 许可协议