html5 meter样式,html - How to style HTML5 <meter> tag - Stack Overflow

I am wondering how I could style the new tag.

80/100

I just want to change the background color and the value color, but I can't find the right CSS properties.

For webkit-based browsers I've found these:

meter::-webkit-meter-horizontal-bar {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));

}

Pseudo element

meter::-webkit-meter-horizontal-optimum-value {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));

}

Pseudo element

meter::-webkit-meter-horizontal-suboptimal-value {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));

}

Pseudo element

meter::-webkit-meter-horizontal-even-less-good-value {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));

}

Pseudo element

meter::-webkit-meter-vertical-bar {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));

}

Pseudo element

meter::-webkit-meter-vertical-optimum-value {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));

}

Pseudo element

meter::-webkit-meter-vertical-suboptimal-value {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));

}

Pseudo element

meter::-webkit-meter-vertical-even-less-good-value {

-webkit-appearance: meter;

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));

}

Where can I find the right CSS properties for gecko-based browsers (Firefox), Opera and IE?