title: HTML5 Meter Styling in Chrome
body: <p>I want to style a password strength meter implemented via . It works fine in Firefox, but not in Chrome.</p>
  
  <p>Here is the relevant CSS, taken from the <a href="https://github.com/mslinn/play-silhouette-seed/blob/master/public/styles/main.css#L52-L82" rel="nofollow">GitHub project CSS file</a>:</p>
  
  <pre><code>meter {
      /* Reset the default appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
  
      margin: 0 auto 1em;
      width: 100%;
      height: .5em;
  
      /* Applicable only to Firefox */
      background: none;
      background-color: rgba(0,0,0,0.1);
  }
  
  meter::-webkit-meter-bar {
      background: none;
      background-color: rgba(0,0,0,0.1);
  }
  
  meter[value="0"]::-webkit-meter-optimum-value,
  meter[value="1"]::-webkit-meter-optimum-value { background: red; }
  meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
  meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
  meter[value="4"]::-webkit-meter-optimum-value { background: green; }
  
  meter[value="1"]::-moz-meter-bar,
  meter[value="1"]::-moz-meter-bar { background: red; }
  meter[value="2"]::-moz-meter-bar { background: yellow; }
  meter[value="3"]::-moz-meter-bar { background: orange; }
  meter[value="4"]::-moz-meter-bar { background: green; }
  </code></pre>
  
  <p>The last bit is important, the ability to style based on the meter's value.</p>