ブログデザイン備忘録 ～ accent-color

CSSの新しいプロパティ：accent-colorはチェックボックスやラジオボタンなどの<input>の色を1行でコントロールできる。 ただし、対応ブラウザがChromium93+およびFirefox92+でSafariはサポートされていない。

coliss.com

コリスのデモサンプルコードを一部変更して、使用例を示す。 入力のチェックボックス、ラジオボタン、スライダ、ゲージは以下のhtmlコードで設置する。

<header>
  <h1><b>Accent</b> Color</h1>
</header>

<label>
  Checkbox
  <input type="checkbox" checked>
</label>

<label>
  Radio Buttons
  <fieldset>
    <input class="pink" type="radio" name="accented-demo" checked>
    <input class="pink" type="radio" name="accented-demo">
    <input class="pink" type="radio" name="accented-demo">
  </fieldset>
</label>

<label>
  Range Slider
  <input class="green" type="range">
</label>

<label>
  Progress element
  <progress class="orange"max="100" value="50">50%</progress>
</label>

チェックボックスはデフォルトのままにして、ラジオボタン、スライダ、ゲージに対してaccent-colorを用いて色を指定する。 使用方法はaccent-color:pink;などとするだけでよい。

.pink {
  accent-color: deeppink;
}
.green{
  accent-color:green;
}

.orange{
  accent-color:orange;
}

以下、全体のコードと実行例を示す。Safariなどでは動作しないことに注意。

See the Pen accent-color by ATATAT (@atatat) on CodePen.