相當於使用HTML5 / CSS3的計數器的按鈕（而不是javascript？）

Question

我想在一個帶有計數器的網頁上放一個“投票”按鈕。 投票按鈕帶有當前投票的計數器。 如果未單擊，則顯示的計數是當前的投票數。 單擊時，當前投票數增加1（並且按鈕更改其狀態或外觀）。

有沒有辦法在純HTML5 / CSS3中執行此操作？

Answer 1

按鈕和它的交互可以在用戶端使用純CSS完成，因為您在文檔服務器端生成一個小樣式標記。 不用說，如果您不使用Javascript或回發帖子，則無法在數據庫中記錄結果。

 #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>