::-ms-fill

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

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.

ブラウザーの対応

No compatibility data found. Please contribute data for "css.selectors.-ms-fill" (depth: 1) to the MDN compatibility data repository.

仕様書

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

関連情報