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

以前まで、要素をクリックしたときのインタラクションデザインには、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: