How to Style HTML5 <Meter> Tag

How to style HTML5 meter tag

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.

Styling a meter element in Safari

Found the media query that allows me to target safari, and set the meter appearance to none, then my styles can override default styles:

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .my-box .meter {
            -webkit-appearance: none;
            appearance: none;
        }
    }
}

codepen updated

HTML5 Meter Styling in Chrome

It's an intentional behavior change.
https://www.chromestatus.com/feature/5668635896971264

So, you need to remove -webkit-appearance:none, or need to build a meter value box yourself.

<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>

How Can I change the background color of HTML meter?

You need to select the meter value and than style accordingly, and for more inputs refer this link.

meter::-webkit-meter-optimum-value {      box-shadow: 0 5px 5px -5px #999 inset;      background-image: linear-gradient(        90deg,         #8bcf69 5%,         #e6d450 5%,        #e6d450 15%,        #f28f68 15%,        #f28f68 55%,        #cf82bf 55%,        #cf82bf 95%,        #719fd1 95%,        #719fd1 100%      );      background-size: 100% 100%;    }

<meter value="0.6"></meter>

HTML5 tag meter attributes

The spec doesn't really specify the colors. For the default styles, in Firefox 22 and Safari 6,

• If low < optimum < high:

  • If the value is < low or > high, it is displayed as yellow,
  • Otherwise green (optimum has not effect).

• If low < high < optimum:

  • If the value is < low, it is displayed as red.
  • If the value is < high, it is displayed as yellow.
  • Otherwise green.

• If optimum < low < high:

  • If the value is > high, it is displayed as red.
  • If the value is > low, it is displayed as yellow.
  • Otherwise green.

This is actually what the spec said:

UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.

We use green for the optimum region, yellow for the suboptimal region and red for even less good region.

BTW you could style the <meter> element (see How to style HTML5 <meter> tag).

Border around meter element in Chrome and Firefox

The only option you got here is to give different styles to the border of the meter in firefox and chrome (border in firefox, no border in chrome), and use the -webkit-meter-bar to set the border in chrome.

You can use the @-moz-document url-prefix() hack in order to do this:

@-moz-document url-prefix() {
    meter {
        border: 5px solid #f00;
    }
}

Here is an example:

meter {  width: 400px;  height: 50px;  background: #ccc;}
@-moz-document url-prefix() {    meter {        border: 5px solid #f00;    }}
meter::-webkit-meter-bar {  background: #ccc;  border: 5px solid #f00;}
meter::-moz-meter-bar {  background: #0a0;}
meter::-webkit-meter-optimum-value {  background: #0a0;}

<meter value="50" min="0" max="100"></meter>

---

Related Topics