非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

CSS の ::-ms-fill 疑似要素Microsoft 拡張で、 <progress> で表示される進捗バーを表します。この疑似要素は Internet Explorer 10, Internet Explorer 11, Microsoft Edge のみで利用できます。

確定的な進捗バーには animation-name 以外の許容されているすべてのプロパティを適用します。 animation-name だけは不確定なものに適用されます。 (進捗バーは value 属性が設定されていれば確定的で、そうでなければ不確定です。不確定な進捗バーは :indeterminate 疑似クラスで選択することができます。)

既定では、 Internet Explorer 及び Edge は不確定な進捗バーに点が動くアニメーションを表示します。 ::-ms-fillanimation-name を設定することで、アニメーションをこの表にあるように変更することができます。

説明
none アニメーションを無効にし、点は表示されません。
-ms-bar バーのパターンを流れる動く点を表示します。
-ms-ring 環状のパターンを流れる動く点を表示します。

許容されているプロパティ

以下の CSS プロパティのみがセレクターに ::-ms-fill を含む規則で使用することができます。その他のプロパティは無視されます。

構文

  ::-ms-fill

HTML

<progress value="10" max="50"></progress>

CSS

progress::-ms-fill {
  background-color: orange;
}

結果

このスタイルを使用した進捗バーは、次のように見えるかもしれません。

A progress bar with its progress indicator colored orange.

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応 未サポート Yes 未サポート 10.0 未サポート 未サポート
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 未サポート Yes 未サポート ? 未サポート 未サポート

仕様書

何れの仕様書の一部でもありません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,