クリックイベントをCSSだけで

以前まで、要素をクリックしたときのインタラクションデザインには、jQuery でイベントトリガーを用意していました。でも、スタイルはCSSで指定したいなと思うわけで。:hover擬似クラスのような感じで、:onclick とかできればいいのになと。

label と input:checked を使うだけなんですけど、この手法を知ったときは目からウロコでした。

サンプルコード

<!-- HTML -->
<div id="sample">
  <label for="toggle">ここをクリックすると</label>
  <input type="checkbox" id="toggle">
  <div>
    <p>要素が変化します</p>
  </div>
</div>

/* CSS */
#sample label{
  cursor: pointer;
}
#sample input{
  display: none;
}
#sample input+div{
  background: lightgray;
}
#sample input:checked+div{
  background: lightgreen;
}

サンプルDEMO

Usage

サンプルでは背景色を変えているだけですが、transition や animation と組み合わせて、いい感じのインタラクションをスクリプトなしで実装できます。

スマホとかタブレットとかのタッチデバイスでは :hover は意味ないですし、使いどころが多いかと思います。

（今さら感のある Tips ですが、こんな感じでまったりまいります）