css - 为什么不使用 CSS 复选框作为切换按钮

Question

我想知道为什么我没有看到这种技术被更频繁地使用。

许多切换按钮使用 JavaScript 或 jQuery 来创建切换功能。

为什么不能只使用复选框输入并使用 CSS 设置标签样式？此外，您可以在标签后放置您喜欢的任何内容，并将绝对位置包裹在相对定位的 input 中，并使用 ~

设置样式

http://jsfiddle.net/j63uk/

<input id="button" type="checkbox">
<label for="button">button</label>
</input>

input {
display: none;
}
label {
padding:20px;
position: relative;
background:green;
display: inline-block;
}
label:hover {
  background:red;
  cursor:pointer;
}
input[type="checkbox"]:checked + label {
background:yellow;
}

也许点击页面上的任何其他内容并使用 JavaScript 禁用切换的能力是主要好处？

Answer 1

这个问题可能更适用于 UX Stackexchange 。切换按钮通常是单选按钮的风格化版本。单选按钮通常适用于用户知道替代选择很重要的情况(例如，他们想从航空公司购买什么级别的机票)。当用户可以同时选择多个选项时复选框适用，但了解提供给他们的不同选项对用户来说仍然很重要(例如，选择以下所有适用的...)。使用复选框来切换单个选项是实现样式化单选按钮的一种视觉上相似但不易访问的方式，因为机器(页面解析器、搜索引擎等)和屏幕阅读器不容易理解代码。从本质上讲，单选按钮是一种在语义上更正确的切换开关样式的方式，它们的样式可以看起来像切换开关，就像复选框也可以一样。

因此，我认为这不是哪个对于 javascript 实现更容易的问题 - 这是一个为您提供最佳、最可维护和语义代码的问题，这些代码可供机器和人类访问(理解)。

正如您所提到的，您可以在复选框或单选框之后放置一些内容，并使用 CSS 兄弟选择器对其进行样式设置。但更有趣的是，您不必复制标签或添加额外的 HTML 来执行此操作，因为您可以在父元素上添加 CSS 规则 direction: rlt; 以从右侧呈现元素(因此，您可以在视觉上将标签放置在输入的左侧，但仍然使用 .checkbox:checked ~ .label 或类似的东西来定位它。因此，您进一步提高了应用程序的可用性并保持类似切换按钮的样式优势。

关于单击页面上的任意位置以禁用切换的观点，可以使用页面上其他位置放置的带有 for 属性的标签来模拟。例如:

<label for="the_toggle">Click me</label>
// Some random code... blah blah blah...
<input type="checkbox" id="the_toggle">

您也可以使用 jQuery 来切换单选按钮、复选框等。值得注意的是 :checked 选择器是 not supported in all browsers 但它可以使用 Selectivizr 启用。

进一步阅读:

• Radios vs Selects
• Styling semantic toggle