Html 将复选框样式设置为切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15436450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style checkboxes as Toggle Buttons
提问by Swen
On my website, users can post articles and tag them accordingly using some pre-set tags. These tags are in the form of checkboxes. Example below:
在我的网站上，用户可以发布文章并使用一些预设标签相应地标记它们。这些标签采用复选框的形式。下面的例子：
<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
As you might know, the checkboxes will look something like this:
您可能知道，复选框看起来像这样：
[ ] Aliens
[o] Ghosts
[ ] Monsters
[ ] 外星人
[o] 鬼魂
[ ] 怪物
I would like to do is have the checkbox being one large button with the value inside of it. And then make it have a "toggle" effect.
我想做的是让复选框成为一个大按钮，里面有值。然后使它具有“切换”效果。
[ Aliens ] [ Ghosts ][ Monsters ]
[外星人] [鬼魂][怪物]
How would I go about doing this?
我该怎么做呢？
采纳答案by Simon
Check thisout
检查该出
HTML
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
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;
}
Note that the last selector may not work in older IE.
请注意，最后一个选择器可能不适用于旧版 IE。
回答by CBroe
This can be done using checkboxes and labels, the adjacent sibling selector – and the CSS3 :selectedpseudo class.
这可以使用复选框和标签、相邻的兄弟选择器和 CSS3:selected伪类来完成。
HTML:
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:
CSS：
input { display:none; }
input:checked ~ label { color:red; }
But be aware that this will easily fail in older browsers – because they don't know ~or :checked. And older IE have problems with checkboxes set to display:none– won't transfer them when the form is submitted (although that can be overcome by other means of hiding, f.e. absolute positioning of the screen).
但请注意，这在较旧的浏览器中很容易失败 - 因为它们不知道~或:checked. 并且较旧的 IE 存在复选框设置为display:none– 提交表单时不会传输它们的问题（尽管可以通过其他隐藏方式来克服，fe 屏幕的绝对定位）。
If you don't insist on a pure HTML/CSS solution – there are many scripts / {js-framework-of-your-choice}-plugins out there, that help achieve the same effect.
如果您不坚持使用纯 HTML/CSS 解决方案 - 有许多脚本/{js-framework-of-your-choice}-plugins 可以帮助实现相同的效果。
回答by Diodeus - James MacFarlane
Checkboxes, radiobuttons and SELECTelements have very limited styling capabilities and they vary widely across browsers.
Checkboxes、radio按钮和SELECT元素的样式功能非常有限，并且它们在浏览器之间差异很大。
You're better off accomplishing these using styled links or buttons, then using JavaScript to set the actual on/off appearance and form values.
您最好使用样式化链接或按钮来完成这些，然后使用 JavaScript 设置实际的开/关外观和表单值。
回答by klewis
You can borrow ideas from this page! Try to bind your text and checkbox. And then then try to use jquery to "toggle" the label associated to the checkbox.
你可以从这个页面借用想法！尝试绑定您的文本和复选框。然后尝试使用 jquery 来“切换”与复选框关联的标签。
You can then use styles and images to make the labels look like containers for checkboxes. That is what I would do.
然后，您可以使用样式和图像使标签看起来像复选框的容器。这就是我会做的。
回答by Voitcus
You may try to have pictures with javascript onclickevent that would change img sourceattribute. Then, put hidden control with given idand in the same onclickevent use document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value(with 0 or 1 as default).
您可以尝试使用 javascriptonclick事件更改img source属性的图片。然后，将隐藏控件与给定id并在同一onclick事件中使用document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value（默认为 0 或 1）。
However, I don't know how to make it without Javascript.
但是，我不知道如何在没有 Javascript 的情况下制作它。
