样式复选框为切换按钮 [英] Style checkboxes as Toggle Buttons

问题描述

在我的网站上，使用者可以张贴文章，并使用预先设定的标签来相应标记。这些标签是复选框的形式。示例如下：

 < input type =checkboxname =wpuf_post_tags []class =new-post-tags value =Aliens/>外星人
< input type =checkboxname =wpuf_post_tags []class =new-post-tagsvalue =Ghosts/& Ghosts 
< input type =checkboxname =wpuf_post_tags []class =new-post-tagsvalue =Monsters/>怪物
  

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

[]外星人

[o] Ghosts

[]怪物

我想做的是使复选框是一个大的按钮，

/ p>

我该如何做？

解决方案

检查这

HTML

 < input id =chk_alienstype =checkboxname = wpuf_post_tags []class =vis-hidden new-post-tagsvalue =Aliens/> 
< label for =chk_aliens>外星人< / label> 
 
< input id =chk_ghoststype =checkboxname =wpuf_post_tags []class =vis-hidden new-post-tagsvalue =Ghosts/> 
< label for =chk_ghosts> Ghosts< / label> 
 
< input id =chk_monsterstype =checkboxname =wpuf_post_tags []class =vis-hidden new-post-tagsvalue =Monsters/& 
< label for =chk_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; 
} 
 
标签{
 margin：10px; 
 padding：5px; 
 border：1px solid gray; 
} 
 
输入：focus + label {
 border-color：blue; 
} 
 
输入：checked + label {
 border-color：red; 
} 
 
输入：focus：checked + label {
 border-color：green; 
} 
  

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

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

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?

解决方案

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;
}

Note that the last selector may not work in older IE.

这篇关于样式复选框为切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！