如何使单选按钮看起来像一个切换按钮 [英] How to make a radio button look like a toggle button

问题描述

我想要一组单选按钮看起来像一组切换按钮（但仍然像单选按钮一样工作）。

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

解决方案

编辑：我将满意使小圆圈消失，并在按钮被选中/取消选中时更改样式。根据您要支持的浏览器，您可以使用 。请注意，：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'）; 
强制IE 8立即通过
更新同级选择器//在父元素上切换类
 $（'。toggle-container'）。addClass（'xyz'）。removeClass（'xyz'） ; 
} 
}）; 
 $（'。no-checkedselector input [type =radio]。toggle：checked'）。addClass（'checked'）; 
  

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

  input [type =radio]。toggle {
 / * IE 8似乎不喜欢更新显示的单选按钮： none * / 
 position：absolute; 
 left：-99em; 
} 
 
 input [type =radio]。toggle：checked + label，
 input [type =radio]。toggle.checked + label {
 / *对所选状态执行特殊操作* / 
} 
  

_{如果您使用Modernizr，则可以使用 ：selector 测试，以帮助确定是否需要回退。我在示例代码中调用我的测试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.}

这篇关于如何使单选按钮看起来像一个切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！