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

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.

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 未対応 なしIE 完全対応 10Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

仕様書

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

関連情報

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

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