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>