How to style HTML5 <meter> tag

css, html, meter

Solution

I got the meter styled with a nice subtle gradient in Webkit browsers using the following code:

meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers

meter::-webkit-meter-bar {
    background: #FFF;
    border: 1px solid #CCC;
}

meter::-webkit-meter-optimum-value {
    background: #87C7DE;
    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

However, Chris Coyier over at CSS-Tricks recommends the following HTML code:

<div class="meter">
    <span style="width: 25%"></span>
</div>

... rather than the HTML5 `<meter>` or `<progress>` tags. At this point in time (February 2013), I agree with him:

To make things worse, things are very different across browsers, even between different WebKit browsers. Pseudo elements also work inconsistently. I hate to leave things hanging like this, but this is really a topic for another time. Suffice it to say, for these particular progress bars, the div/span thing is the ticket for now.

Browsers just don't really seem ready to accept the new HTML5 standard tags for `<meter>` and `<progress>`. With that said, I'd suggest that people get over the desire to go straight for the future and rather go for something that works visually until further notice. I should also mention that at the current point in time, the current browser support for these tags is at 53%... that's not worth it for me, but I'll leave that to your project's discretion.

Problem

I am wondering how I could style the new `<meter>` tag. ``` <meter value=80 min=0 max=100> 80/100 </meter> ``` 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?

Original source