CSSだけでクリックイベントを実装する

作成日 2021.01.19
CSS
CSS3

CSS3の「:checked」疑似クラスをinputタグに使うことで、JavaScriptを使わずにクリックイベントを実装します。今回はクリックで画像をグレースケールにするサンプルコードを記述しています。

1. 環境
2. クリックイベントを実装
3. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

クリックイベントを実装

inputタグと結びついたlabel をクリックすることで、inputタグの直後に隣接するdivへのイベントを実行しています。

/*クリックイベントのcss*/

#clickdemo label{
    cursor: pointer;
}
#clickdemo input{
    display: none;
}
#clickdemo input+div{
    /*イベント前の状態*/
}
#clickdemo input:checked+div{
    /*クリックした際のアクション*/
}

サンプルコード

以下はクリックした際に、下の画像をグレースケールにするサンプルコードを記述しています。

<section>
    <style>
        #clickdemo label{
            cursor: pointer;
            font-weight: bold;
            background: #efefef;
            border: 1px solid #dcdcdc;
            padding: 0.5em 1em;
            color: #3db70f;
            display: inline-block;
            margin-bottom: 15px;
        }
        #clickdemo input{
            display: none;
        }
        #clickdemo input+div{
            filter: none;
        }
        #clickdemo input:checked+div{
            filter: grayscale(100%);
        }
    </style>
        
    <div id="clickdemo">
        <label for="clicktoggle">ここをクリックしてください</label>
        <input type="checkbox" id="clicktoggle">
        <div>
            <img src="https://mebee.info/wp-content/uploads/2021/01/neko.jpg" alt="neko" style="width: 100%; max-width: 300px;"/>
        </div>
    </div>    
</section>

ブラウザ上で表示した結果

ここをクリックしてください