accent-colorを使って、チェックボックス（type="checkbox"）、ラジオ（type="redio"）、スライダー（type="range"）の色を変更する ✅

accent-colorというCSSプロパティを使えば、input要素の色を変更できることしりました。

developer.mozilla.org

Internet Explorerは非対応ですが、モダンブラウザの最新版であれば問題なく使えるようです。

検証

ソースコード

input {
  accent-color: red;
}

こちらのコードで、input要素のaccent-colorを赤に設定してみて、いろんなinput要素を観察してみます。

結果

チェックボックス（type="checkbox"）、ラジオ（type="redio"）、スライダー（type="range"）の色を変更することができました。