伪元素改变HTML5 meter元素的默认样式实例页面

CSS代码：

.deal meter { -webkit-appearance: none; }
.deal ::-webkit-meter-bar {
    height: 1em;
    background: white;
    border: 1px solid black;
}
.deal ::-webkit-meter-optimum-value { background: green; }	/* 好 */
.deal ::-webkit-meter-suboptimum-value { background: orange; }	/* 凑合 */
.deal ::-webkit-meter-even-less-good-value { background: blue; }	/* 糟糕 */

.deal ::-moz-meter-bar {
    background: rgba(0,96,0,.6);
}
                

HTML代码：

<p>
    默认的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
<p class="deal">
    处理的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>