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

tecmemo2111

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

 

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

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

 

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

 

Can I use

 

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

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

 

DEMO

 

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

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

 

 

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

 

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

 

web.dev

 

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

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

CSSプロパティ「accent-color」でフォームのパーツの色を簡単に変える はコメントを受け付けていません
  • このページを共有する