如何在Chrome中自定义meter元素样式以匹配Firefox显示效果

Chrome基于WebKit内核，对<meter>的样式渲染逻辑和Firefox不同，仅设置::-webkit-meter-bar不足以覆盖默认样式，需要针对WebKit的伪元素结构调整：

修改后的CSS代码 #

meter {
    width: 5em;
    height: 2em;
    border-radius: 4px;
    border: 2px solid gray;
    background: lightgray;
    /* 重置Chrome默认原生样式，确保自定义属性生效 */
    -webkit-appearance: none;
    appearance: none;
}

/* Firefox 下的填充条样式 */
meter::-moz-meter-bar {
    background: green;
    border-radius: 2px; /* 适配父元素边框圆角，避免溢出 */
}

/* Chrome 下的meter容器背景 */
meter::-webkit-meter-bar {
    background: lightgray;
    border-radius: 2px;
}

/* Chrome 下的填充条（value处于正常范围时生效） */
meter::-webkit-meter-optimum-value {
    background: green;
    border-radius: 2px;
}

关键调整说明 #

• 添加-webkit-appearance: none; appearance: none;：移除Chrome为meter预设的原生样式，让自定义的边框、圆角等属性正常生效。
• 拆分WebKit伪元素：Chrome中<meter>分为外层容器::-webkit-meter-bar（对应背景区域）和填充区域::-webkit-meter-optimum-value（对应已填充的绿色部分），需分别配置样式。
• 适配圆角：将填充条的圆角设为2px，与父元素4px的边框圆角配合，避免边角溢出，和Firefox的显示效果对齐。

修改后，Chrome 131.0.6778.86版本中<meter max="40" value="12"></meter>的显示效果将与Firefox一致。

内容的提问来源于stack exchange，提问作者Matt Ellen