CSSプロパティ「accent-color」でフォームのパーツの色を簡単に変える

こんにちは、ウェブラボクリエイターズメモです。

フォームのパーツの色を簡単に変えることができるCSSプロパティ「accent-color」を紹介していきたいと思います。

色を変えられる要素は「チェックボックス」、「ラジオボタン」、「レンジスライダー」、「プログレスバー」の４つみたいです。

まずは対応ブラウザを以下の参考サイトでご確認ください。

→Can I use

iOSのSafariで使えないとこがネックかもしれないですがそれ以外は気にしないでも良さそうですね。

では早速DEMOを作ってみましたのでまずそちらをご覧ください。

→DEMO

1行のCSSでこのように簡単に変えることが出来ます！

ちなみにCSSのソースは以下の様になっています。

従来の疑似要素を使用する方法などは色々なことができますが、かなり面倒なので色を変えたりするくらいならこちらのほうが簡単でいいですね。

以下の開発者向け記事にプロパティの説明や他パーツの矢印などの色を変更する方法も記載してありますので気になる方は合わせてご覧ください。

→web.dev

最近は知らないうちにどんどん便利プロパティが増えていっているので、情報逃さないようにアンテナ張っていきたいですね。

以上、クリエイターズメモでした。