我正在制作一个投票系统,其中包括两个按钮(赞成/反对)。我使用了输入和标签标记来创建它,但是存在一个问题:
如果我使用单选按钮,我只能投赞成或反对票,但我无法取消投票。
如果我使用复选框,我可以取消投票,但也可以同时投赞成和反对票。
我的目标是只能投赞成或反对票,同时也能取消投票(类似Reddit)。
我已经彻底查找了答案,并发现这在CSS中是不可能实现的。虽然有很多脚本,但问题是我不知道JavaScript或jQuery,因此我不知道如何实现代码。
我认为最简单的解决方案是在点击赞成或反对按钮时取消另一个按钮的选择,反之亦然,但同样,我不知道这段代码应该是什么样子,也不知道如何实现它。
也许使用纯CSS有更简单的解决方案,即使已经被选中,也可以更改其他按钮的外观?我不知道,但如果存在这样的解决方案,我宁愿使用它。
我的代码:
如果我使用单选按钮,我只能投赞成或反对票,但我无法取消投票。
如果我使用复选框,我可以取消投票,但也可以同时投赞成和反对票。
我的目标是只能投赞成或反对票,同时也能取消投票(类似Reddit)。
我已经彻底查找了答案,并发现这在CSS中是不可能实现的。虽然有很多脚本,但问题是我不知道JavaScript或jQuery,因此我不知道如何实现代码。
我认为最简单的解决方案是在点击赞成或反对按钮时取消另一个按钮的选择,反之亦然,但同样,我不知道这段代码应该是什么样子,也不知道如何实现它。
也许使用纯CSS有更简单的解决方案,即使已经被选中,也可以更改其他按钮的外观?我不知道,但如果存在这样的解决方案,我宁愿使用它。
我的代码:
input[type=radio] {
display: none
}
#up {
width: 20px;
height: 16px;
background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png) left top;
position: absolute;
left: 50px;
top: 50px
}
#down {
width: 20px;
height: 16px;
background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png) left bottom;
opacity: 0.5;
position: absolute;
left: 50px;
top: 84px
}
#vote {
width: 21px;
height: 18px;
text-align: center;
font-size: 26px;
line-height: 18px;
position: absolute;
left: 50px;
top: 66px;
z-index: -1
}
#up:hover {
background-position: top;
cursor: pointer
}
#upvote:checked ~ #up {
background-position: top;
}
#upvote:checked ~ #vote {
color: #DC5B28;
z-index: 1
}
#down:hover {
background-position: bottom;
cursor: pointer;
opacity: 1
}
#downvote:checked ~ #down {
background-position: bottom;
opacity: 1
}
#downvote:checked ~ #vote {
color: #3580DD
}
#no {
position: absolute;
display: none;
background: url(http://c.thumbs.redditmedia.com/Y5Gt7Gtk59BlV-3t.png)
}
#upvote:checked ~ #no {
display: block;
background-position: left top;
left: 50px;
top: 50px
}
#downvote:checked ~ #no {
display: block;
background-position: left bottom;
left: 50px;
top: 84px;
opacity: 0.5
}
<input type="radio" name="vote" value="+1" id="upvote">
<label for="upvote" id="up"></label>
<input type="radio" name="vote" value="-1" id="downvote">
<label for="downvote" id="down"></label>
<input type="radio" name="vote" value="0" id="novote">
<label for="novote" id="no"></label>
<div id="vote">•</div>