プログレスバーをカスタマイズする

ブラウザごとにサポートされている疑似要素を使えば、プログレスバーを簡単にカスタマイズできる。

• (Demo) プログレスバーをカスタマイズする

Firefox では赤く、

Chrome などの Webkit 系ブラウザでは青くした。

/* バーの背景を変える */
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: hotPink; /* -moz- 用 */
}

::-webkit-progress-bar {
  background-color: aqua;
}

/* バーの進捗率の表示を変える */
::-moz-progress-bar {
  background-color: red;
}

::-webkit-progress-value {
  background-color: blue;
}

progress 要素に指定したプログレスバーの背景色は Firefox では反映されるが、Chrome では反映されない。Chrome で背景などのスタイルを変更する場合は、代わりに ::-webkit-progress-bar 疑似要素を使う。

::-moz-progress-bar と ::-webkit-progress-value はプログレスバーの進捗率を表す部分の装飾に使う。