为什么不使用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。切换按钮通常是单选按钮的样式版本。单选按钮通常适用于重要的是用户知道其他选择（例如，他们想从航空公司购买什么类别的票）。复选框适用于用户可以同时选择多个选项，但对于用户了解提供给他们的不同选项（例如，选择以下所有适用的选项），仍然很重要。使用复选框来切换单个选项是一种视觉上类似但不易实现样式化单选按钮的方式，因为机器（页面解析器，搜索引擎等）和屏幕阅读器不容易理解代码。从本质上讲，单选按钮在设计开关时更加符合语义的正确方式，它们的样式可以像开关一样，就像复选框一样。因此，我认为这不是一个更容易实现的问题 - 这是一个问题，它会给你提供最好，最易维护和语义化的代码，可以被机器和人类访问。如上所述，您可以在复选框或收音机后面放置一些东西，并使用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来切换收音机，复选框等等。值得注意的是：检查选择器是not supported in all browsers，但它可以使用Selectivizr启用。

延伸阅读：

• Radios vs Selects
• Styling semantic toggle