Question

我想知道为什么我不经常使用这种技术。

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

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

进行样式设置

<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实现来说更容易 - 这是一个问题，它为您提供了最好，最易维护和语义的代码，这些代码可供机器和人类使用（无论如何）。< / p>

正如您所提到的，您可以在复选框或收音机后放置一些内容，并使用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启用它。

进一步阅读：

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

1 个答案: