【CSS】accent-colorでフォーム要素の色変更

  <div class="box">
      <input type="checkbox" id="check" checked>
      <label for="check">チェックボックス</label>
      <input type="checkbox" id="check2" checked class="accented">
      <label for="check2">チェックボックス</label>
  </div>

  <div class="box">
    <input type="radio" id="radio" checked >
    <label for="radio">ラジオボタン</label>
    <input type="radio" id="radio2" checked class="accented">
    <label for="radio2">ラジオボタン</label>
  </div>
  <div class="box">
    <input type="range" id="range" />
    <label for="range">レンジ</label>
    <input type="range" id="range2" class="accented">
    <label for="range2">レンジ</label>
  </div>

  <div class="box">
    <progress max="100" value="70"></progress>
    <progress max="100" value="70" class="accented"></progress>
  </div>

.accented {
  accent-color: red;
}

.box {
  margin-block: 40px;
  padding-inline: 80px;

}