東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2021.11.19 Posted by

tecmemo2111

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

 

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

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

 

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

 

Can I use

 

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

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

 

DEMO

 

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

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

 

 

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

 

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

 

web.dev

 

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278