title: How to style HTML5 <meter> tag
body: <p>I am wondering how I could style the new <code>&lt;meter&gt;</code> tag.</p>
  
  <pre><code>&lt;meter value=80 min=0 max=100&gt;
    80/100
  &lt;/meter&gt;
  </code></pre>
  
  <p>I just want to change the background color and the value color, but I can't find the right CSS properties.
  For webkit-based browsers I've found these:</p>
  
  <pre><code>meter::-webkit-meter-horizontal-bar {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
  }
  Pseudo element
  meter::-webkit-meter-horizontal-optimum-value {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
  }
  Pseudo element
  meter::-webkit-meter-horizontal-suboptimal-value {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
  }
  Pseudo element
  meter::-webkit-meter-horizontal-even-less-good-value {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
  }
  Pseudo element
  meter::-webkit-meter-vertical-bar {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
  }
  Pseudo element
  meter::-webkit-meter-vertical-optimum-value {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
  }
  Pseudo element
  meter::-webkit-meter-vertical-suboptimal-value {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
  }
  Pseudo element
  meter::-webkit-meter-vertical-even-less-good-value {
  -webkit-appearance: meter;
  background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
  }
  </code></pre>
  
  <p>Where can I find the right CSS properties for gecko-based browsers (Firefox), Opera and IE?</p>