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

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

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

当按钮被选中/取消选中时，让小圆圈消失并改变样式，我会很满意.

解决方案

根据您要支持的浏览器，您可以使用 .请注意，:checked 仅在 IE 9 中受支持，因此这种方法仅限于较新的浏览器.

但是，如果您需要支持 IE 8 并且愿意使用 JavaScript*，您可以轻松破解对 :checked 的伪支持(尽管您也可以轻松直接在标签上设置类).

使用一些快速而肮脏的 jQuery 代码作为解决方法的示例:

$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {如果(this.checked){$('input[name="' + this.name + '"].checked').removeClass('checked');$(this).addClass('checked');//强制 IE 8 立即更新兄弟选择器//在父元素上切换一个类$('.toggle-container').addClass('xyz').removeClass('xyz');}});$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

然后您可以对 CSS 进行一些更改以完成操作:

input[type="radio"].toggle {/* IE 8 似乎不喜欢更新 display:none 的单选按钮 */位置:绝对；左:-99em；}输入[type="radio"].toggle:checked + label,输入[type="radio"].toggle.checked + 标签{/* 对选中的状态做一些特别的事情 */}

_{*如果你使用的是 Modernizr，你可以使用 :selector test 以帮助确定您是否需要后备.我在示例代码中将我的测试称为checkedselector"，随后仅在测试失败时设置 jQuery 事件处理程序.}

I want a group of radio buttons to look like a group of toggle buttons (but still function like radio buttons). It's not necessary that they look exactly like toggle buttons.

How can I do this only with CSS and HTML?

EDIT: I will be satisfied making the little circle disappear and changing the style when the button is checked/unchecked.

解决方案

Depending on which browsers you aim to support, you could use the :checked pseudo-class selector in addition to hiding the radio buttons.

Using this 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>

You could use something like the following CSS:

input[type="radio"].toggle {
  display: none;
}

input[type="radio"].toggle:checked + label {
  /* Do something special with the selected state */
}

For instance, (to keep the custom CSS brief) if you were using Bootstrap, you might add class="btn" to your <label> elements and style them appropriately to create a toggle that looks like:

...which just requires the following additional 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;
}

I've included this as well as the extra fallback styles in a radio button toggle jsFiddle demo. Note that :checked is only supported in IE 9, so this approach is limited to newer browsers.

However, if you need to support IE 8 and are willing to fall back on JavaScript*, you can hack in pseudo-support for :checked without too much difficulty (although you can just as easily set classes directly on the label at that point).

Using some quick and dirty jQuery code as 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');

You can then make a few changes to the CSS to complete things:

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 */
}

_{*If you're using Modernizr, you can use the :selector test to help determine if you need the fallback. I called my test "checkedselector" in the example code, and the jQuery event handler is subsequently only set up when the test fails.}