<meter>在Chrome中無法正常工作

我在關注創建密碼強度計的this article。這在Firefox中運行良好，但不會在Chrome瀏覽器中切換顏色。我也嘗試了附帶的code pen demo，而且這在Chrome瀏覽器中似乎也不起作用。以下是CSS樣式的儀表元素：<meter>在Chrome中無法正常工作

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="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 { 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; }

請有什麼建議可以在Chrome中得到改變這是導致這種行爲？我試圖尋找供應商prifixes的任何變化，但無法找到任何。

來源

2016-08-11 skjoshi

http://caniuse.com/#search=meter –

謝謝。我使用Chrome 52，它似乎支持。我也查看了html5doctor頁面，但沒用。 – skjoshi

歌劇39 - 效果相同 –