accent-colorプロパティの使い方

チェックボックスの色の変更方法はとっても簡単で、以下のように設定するだけでチェック時の色が変えられます！

.checkbox {
  accent-color: #f00;
}

inputタグに直接スタイルを指定する場合は、以下のようにすると

<input type="checkbox" style="accent-color: #f00;" checked>

↓こんな感じで色が変えられます！

↓Chromeでは薄い色を指定した場合はチェックマークが黒になりました！
他のブラウザは未確認ですｗ

チェックマークの色はいつ変わるのか？

設定する色によって、チェックマークの色が白だったり黒だったりしたので、試しに確認してみようと思います！
おそらく明度によって変わる気がするので、シンプルにモノトーンで確認をしてみたいと思います！
※確認しているブラウザはWindowsのChromeなので、OSやブラウザによって表示が変わるかと思いますので、いろんなブラウザでこの記事を見てみてください！

検証した結果、#888と#999が境目でした！

WindowsのChromeで表示したときのスクショ画像は↓こちらです！

iOSのsafariで表示した場合

記事をスマホで表示したところ、accent-colorが効いていませんでした…

appearance: none;と-webkit-appearance: none;も追記してみましたが、チェックマークが消えてしまい、なかなか思うようなチェックボックスのデザインになりませんでした…

調べてみると、スマホブラウザではaccent-colorが効かないようなので（iOSのみだけ？）別の方法で色を変更する方法をやっていきたいと思います！

<input class="cb_red" type="checkbox" checked>

input.cb_red[type="checkbox"] {
  position: relative;
  height: 40px;
  width: 40px;
  display: inline-block;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input.cb_red[type="checkbox"]:checked {
  border: none;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect fill='%23f00' width='16' height='16'/><path fill='none' stroke='%23fff' stroke-width='2' d='M12.6,5.17l-5.66,5.66L3.4,7.29'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
}

<input class="cb_green" type="checkbox" checked>

input.cb_green[type="checkbox"] {
  position: relative;
  height: 40px;
  width: 40px;
  display: inline-block;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input.cb_green[type="checkbox"]:checked {
  border: none;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect fill='%23090' width='16' height='16'/><path fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12.6,5.17l-5.66,5.66L3.4,7.29'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
}

追記

2023/05/10：
inputタグにbefore,afterの疑似要素を設定してチェックマークを作るやり方を記載しておりましたが、
inputタグに疑似要素を設定するのはよくないとの記事を見かけたため、記事を書き直しました。
実際に検証ツールでソースを確認したところ閉じのinputタグができてしまっていたため、
background-imageでチェックボックスの画像を設定する方法に記事を修正させていただきました。