「:has()を使ってCSSだけで同意チェックボタンを実装する方法」のご紹介| Webデザイン参考記事まとめアプデ

2024年07月17日(水)

:has()を使ってCSSだけで同意チェックボタンを実装する方法

0

3

3

4

CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。

そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性／非活性を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。

:has()を使ってCSSだけで同意チェックボタンを実装

まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。

See the Pen
CSS only Agree Check by BLACKFLAG (@Black...

マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『:has()を使ってCSSだけで同意チェックボタンを実装する方法』についてまとめています。

この記事は特にjavascript・CSS3・Firefoxについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。