在我的网站上,用户可以发布文章并使用一些预设标签相应地标记它们。这些标签采用复选框的形式。下面的例子:
<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] 鬼魂
[ ] 怪物
我想做的是让复选框成为一个大按钮,其中包含值。然后使其具有“切换”效果。
[ 外星人 ][ 鬼魂 ][怪物]
我该怎么做呢?
Check this out
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 中工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)