title: Cannot style html5 progress bars?
body: <p>Firstly I would like to mention this is for an assignment so I cannot use any alternative to the html5 progress bar unfortunately.</p>
  
  <p>It seems as if any css I try on the bar has no effect other than possibly turning the bar green. Here is the code and result:</p>
  
  <p><a href="https://i.stack.imgur.com/I6gmS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I6gmS.png" alt="Styled"></a></p>
  
  <p>If I do not apply any styling it appears as such:</p>
  
  <p><a href="https://i.stack.imgur.com/pd6Ds.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pd6Ds.png" alt="Unstyled"></a></p>
  
  <p>I must be missing something here :/</p>
  
  <pre><code>&lt;style&gt;
  progress { background: blue; }
  &lt;/style&gt;
  
  &lt;progress id="progressBar" class="test_bar" value="185" max="185"&gt;&lt;/progress&gt;
  &lt;span id="status"&gt;&lt;/span&gt;
  </code></pre>