将复选框样式设置为切换按钮答案

【问题标题】：Style checkboxes as Toggle Buttons将复选框样式设置为切换按钮
【发布时间】：2013-03-15 15:40:22
【问题描述】：

在我的网站上，用户可以发布文章并使用一些预设标签相应地标记它们。这些标签采用复选框的形式。示例如下：

<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Aliens" /> Aliens
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Ghosts" /> Ghosts
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Monsters" /> Monsters

您可能知道，复选框看起来像这样：

[ ] 外星人

[o] 幽灵

[ ] 怪物

我想做的是让复选框成为一个大按钮，其中包含值。然后让它有一个“切换”的效果。

[外星人][幽灵][怪物]

我该怎么做呢？

【问题讨论】：

你有没有启发你的网上例子？
当你说“切换效果”时，是悬停吗？点击？它会移动复选框吗？
@blackhawk 我没有在线示例可以激发我的灵感。使用切换效果，我的意思是单击按钮时，复选框将被“标记”并保持这种状态，直到提交表单。之后，所有“标记”的复选框都将用作文章的标签。
@blachawk 我认为它应该类似于 MS Word 中的文本格式按钮（斜体、粗体等）。
我的小例子 - jsfiddle.net/r37boLbr

标签： html css checkbox toggle

【解决方案1】：

签出this

HTML

<input id="chk_aliens" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Aliens" />
<label for="chk_aliens">Aliens</label>

<input id="chk_ghosts" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Ghosts" />
<label for="chk_ghosts">Ghosts</label>

<input id="chk_monsters" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Monsters" />
<label for="chk_monsters">Monsters</label>

CSS

.vis-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

label {
  margin: 10px;
  padding: 5px;
  border: 1px solid gray;
}

input:focus + label {
  border-color: blue;
}

input:checked + label {
  border-color: red;
}

input:focus:checked + label {
  border-color: green;
}

请注意，最后一个选择器可能无法在旧版 IE 中使用。

【讨论】：

我有一个类似的例子here，基于this CSS Ninja article。根据那篇文章，IE8 及更低版本不支持 :checked 伪类，所以这在那些浏览器中分崩离析。因此，您需要确保仅将这些样式提供给功能强大的浏览器 - 一种方法是使用 not() 伪类 - 或将它们全部放在媒体查询中。
@CherryFlavourPez 我刚刚看了你的例子，我真的很喜欢。然而，我想知道的是，我是否会更好地使用 CSS 来实现切换效果或使用 javascript/jquery。你会推荐哪个？
您也可以使用conditional IE body class 并将这些样式应用于比 IE8 更新的浏览器。因此，在 IE8 中，您会看到普通的复选框，而对于较新的浏览器，您会看到精美的标签。
正如@Simon 所说，我想说这是progressive enhancement 完全有意义的完美示例。只需将 CSS 版本用于功能强大的浏览器，备用是一系列（完全可用的）复选框。 JavaScript 只是增加了另一层复杂性（在这种情况下你需要做两个版本，允许那些禁用它的用户）。

【解决方案2】：

这可以使用复选框和标签、相邻兄弟选择器以及 CSS3 :selected 伪类来完成。

HTML：

<span><input type="checkbox" id="c1"><label for="c1">[ Aliens ]</label></span>
<span><input type="checkbox" id="c2"><label for="c2">[ Ghosts ]</label></span>
<span><input type="checkbox" id="c3"><label for="c3">[ Monsters ]</label></span>

CSS：

input { display:none; }
input:checked ~ label { color:red; }

http://jsfiddle.net/drTg2/

但请注意，这在旧浏览器中很容易失败 - 因为他们不知道 ~ 或 :checked。旧版 IE 的复选框设置为 display:none 时存在问题 - 提交表单时不会传输它们（尽管这可以通过其他隐藏方式来克服，例如屏幕的绝对定位）。

如果您不坚持纯 HTML/CSS 解决方案 - 有许多脚本/{js-framework-of-your-choice}-插件可以帮助实现相同的效果。

【讨论】：

这正是我想要做的！在我的网站上使用它会有多“危险”？（隐藏复选框并使用标签来选中/取消选中它们？）
这取决于它在每个浏览器中工作的重要性——或者你是否可以忍受它在稍旧的浏览器中不工作......
请注意，如果您设置 display: none，您将无法通过复选框选择选项卡，它们的值也不会在表单中提交。您应该使用可见性隐藏类。
实际上，Simon 使用选择器 input:checked + label 的答案更可取——我的使用 ~ 取决于封装在另一个元素 (span) 中的输入和标签。

【解决方案3】：

Checkboxes、radio 按钮和SELECT 元素的样式功能非常有限，并且它们在不同的浏览器中差异很大。

您最好使用样式链接或按钮来完成这些，然后使用 JavaScript 设置实际的开/关外观和表单值。

【讨论】：

这正是我要说的，样式化表单元素是一件令人头疼的事情，尤其是如果它应该是跨浏览器的话。
切换按钮需要通过表单提交。我不确定使用样式链接或按钮如何实现。
不仅如此，它们都有广为接受的用例。使复选框像单选按钮一样起作用会破坏用户体验标准。
是的，让另一个元素更像“复选框”比让一个复选框更像任何其他元素（在样式方面）要容易得多（如果可能的话）。
Swen：你需要制作 CSS 按钮，为开/关状态交换类，并使用隐藏的表单字段来存储数据，方法是连接一个 JS 点击事件来设置值。

【解决方案4】：

您可以从这个page 中借鉴想法！尝试绑定您的文本和复选框。然后尝试使用 jquery 来“切换”与复选框关联的标签。

然后，您可以使用样式和图像使标签看起来像复选框的容器。这就是我会做的。

【讨论】：

【解决方案5】：

您可以尝试使用 javascript onclick 事件来更改 img source 属性的图片。然后，使用给定的id 放置隐藏控件，并在同一onclick 事件中使用document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value（默认为0 或1）。

但是，我不知道如何在没有 Javascript 的情况下制作它。

【讨论】：