---
title: '::-ms-fill'
slug: 'Web/CSS/::-ms-fill'
tags:
  - CSS
  - Non-standard
  - Pseudo-element
  - Reference
translation_of: 'Archive/Web/CSS/::-ms-fill'
---
<div>{{CSSRef}}{{Non-standard_header}}</div>

<p>Le pseudo-élément <strong><code>::-ms-fill</code></strong> est un pseudo-élément <a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui représente la partie « remplie » d'un élément {{HTMLElement("progress")}}. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.</p>

<p>Toutes les propriétés autorisées (à l'exception de {{cssxref("animation-name")}}) s'appliquent sur une barre de progression dans un état déterminé. Seule <code>animation-name</code> s'applique sur une barre dans un état indéterminée. Les éléments <code>&lt;progress&gt;</code> dans un état indéterminés sont ceux qui n'ont pas d'attribut {{htmlattrxref("value")}}, ils peuvent être sélectionnés grâce à la pseudo-classe {{cssxref(":indeterminate")}}.</p>

<p>Par défaut, IE affiche un bordure avec des points qui se déplacent lorsque la barre est dans un état déterminée. En utilisant <code>animation-name</code> sur <code>::-ms-fill</code>, on peut modifier l'animation :</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Valeur</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>none</code></td>
   <td>L'animation est désactivée, aucun point n'est affiché.</td>
  </tr>
  <tr>
   <td><code>-ms-bar</code></td>
   <td>Les points animés sont affichés sous la forme d'une barre.</td>
  </tr>
  <tr>
   <td><code>-ms-ring</code></td>
   <td>Les points animés sont affichés sous la forme d'un anneau.</td>
  </tr>
 </tbody>
</table>

<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>

<p>Seules les propriétés suivantes peuvent être utilisées avec <code>::-ms-fill</code> (les autres propriétés seront ignorées) :</p>

<ul>
 <li>{{cssxref("animation-name")}}</li>
 <li>{{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}</li>
 <li>{{cssxref("border")}}</li>
 <li>{{cssxref("border-radius")}}</li>
 <li>{{cssxref("box-shadow")}}</li>
 <li>{{cssxref("box-sizing")}}</li>
 <li>{{cssxref("color")}}</li>
 <li>{{cssxref("cursor")}}</li>
 <li>{{cssxref("display")}} (avec les valeurs : <code>block</code>, <code>inline-block</code> et <code>none</code>.)</li>
 <li>{{cssxref("font")}}</li>
 <li>{{cssxref("height")}}</li>
 <li>{{cssxref("margin")}}</li>
 <li>{{cssxref("-ms-background-position-x")}}</li>
 <li>{{cssxref("-ms-background-position-y")}}</li>
 <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
 <li>{{cssxref("opacity")}}</li>
 <li>{{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li>
 <li>{{cssxref("padding")}}</li>
 <li>{{cssxref("transform")}} et {{cssxref("transform-origin")}}</li>
 <li>{{cssxref("visibility")}}</li>
</ul>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<ul>
</ul>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">progress::-ms-fill {
  background-color: orange;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;progress value="10" max="50"&gt;&lt;/progress&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>

<p>Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :</p>

<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p>

<h2 id="Spécifications">Spécifications</h2>

<p>Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.selectors.-ms-fill")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("::-moz-progress-bar")}}</li>
 <li>{{cssxref("::-webkit-progress-bar")}}</li>
 <li>{{cssxref("::-webkit-progress-value")}}</li>
 <li>{{cssxref("::-webkit-progress-inner-element")}}
  <ul>
  </ul>
 </li>
</ul>