使用HTML5/CSS3（而不是javascript？）等同于带有计数器的类似按钮

Question

我想在带有计数器的网页上放置一个 "vote" 按钮。投票按钮带有当前投票的计数器。如果没有点击，则显示的计数是当前的票数。单击时，当前投票数会增加一（并且按钮会更改其状态或外观）。

有没有办法在纯 HTML5/CSS3 中做到这一点？

Answer 1

按钮及其交互可以在用户端使用纯 CSS 完成，前提是您在文档服务器端生成了一个小的样式标签。不用说，如果不使用 Javascript 或 post 返回，则无法将结果记录在数据库中。

#container {
  width: 100px;
  height: 20px;
  position: relative;
  text-align: center;
}
#like {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
#like:checked {
  counter-increment: likes;
}
#button {
  display: block;
  width: 100%;
  height: 100%;
  background: green;
}
#like:checked ~ #button {
  background: blue;
}
#count:before {
  content: counter(likes);
}

<!-- Create this style tag server-side -->
<style>
  body {
    counter-reset: likes 7; /* Initial number of likes */
  }
</style>
<div id="container">
  <input id="like" type="checkbox" name="like" value="like" />
  <span id="button">Like <span id="count"></span></span>
</div>

使用HTML5/CSS3（而不是javascript？）等同于带有计数器的类似按钮

Equivalent of like buttons with counters using HTML5/CSS3 (and not javascript?)

html

css

button