Chrome中的HTML5計量器樣式

Question

我想要設置通過實現的密碼強度計。它在Firefox中正常工作，但在Chrome中無法正常工作。

下面是相關CSS，從GitHub project CSS file採取：

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; } 

最後一點是很重要的，基於儀表的價值的能力，以風格。

Answer 1

這是一種有意的行爲改變。 https://www.chromestatus.com/feature/5668635896971264

所以，你需要刪除-webkit-appearance:none，或者需要自己建立一個米值框。

<style> 
meter { 
    -webkit-appearance: none; 
    background: gray; 
} 
meter > div { 
    height: 100%; 
} 
meter[value="1"] > div { 
    width: 25%; 
    background: red; 
} 
meter[value="2"] > div { 
    width: 50%; 
    background: yellow; 
} 
meter[value="3"] > div { 
    width: 75%; 
    background: orange; 
} 
meter[value="4"] > div { 
    width: 100%; 
    background: green; 
} 
</style> 
<meter value=3><div></div></meter>