30

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?

Simone
  • 20,302
  • 14
  • 79
  • 103
  • I have tried to render the meter tag in FF and IE like the Chrome one. I have applied `display:block; width:100%; height:1em;` and lots of gradients. It works! But when I have to create another element inside the meter to act as a meter value... becomes tricky. So I've decided to use [this](http://www.webappers.com/progressBar/), for the moment. – Simone Nov 12 '11 at 09:07
  • @simone: I think if you look at my updated answer, you might find it to be more detailed... – cereallarceny Jun 02 '13 at 16:47

6 Answers6

17

Here is a cross browser solution in 2019:

meter {
  --background: #dadada;
  --optimum: forestgreen;
  --sub-optimum: gold;
  --sub-sub-optimum: crimson;

  /* The gray background in Firefox */
  background: var(--background);
  display: block;
  margin-bottom: 1em;
  width: 100%;
}

/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
  background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
  background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
  background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
  background: var(--sub-sub-optimum);
}
<label>
  Optimum
  <meter value=80 min=0 low=30 high=60 max=100 optimum=80>
    80/100
  </meter>
</label>

<label>
  Sub-optimum
  <meter value=80 min=0 low=30 high=60 max=100 optimum=50>
    80/100
  </meter>
</label>

<label>
  Sub-sub-optimum
  <meter value=80 min=0 low=30 high=60 max=100 optimum=20>
    80/100
  </meter>
</label>

Note that the unfilled (grey) portion of the meter is styled with the ::-webkit-meter-bar in Chrome, while firefox uses ::-moz-meter-bar for the filled (green, yellow, red) part and styles the unfilled part with under the meter element it self.

Also note that firefox has pseudo selectors on the meter element to differentiate between optimal and sub-optimal values (:-moz-optimal, :-moz-sub-optimal, and :-moz-sub-sub-optimal; then you simply style the ::-moz-meter-bar pseudo child of the appropriate pseudo selector) while Chrome allows you to style different pseudo elements for that purpose (::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, and ::-webkit-meter-even-less-good-value respectively).

Here is a link that explains what these prefixed pseudo elements mean. https://scottaohara.github.io/a11y_styled_form_controls/src/meter/

Rúnar Berg
  • 4,229
  • 1
  • 22
  • 38
14

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.

cereallarceny
  • 4,913
  • 4
  • 39
  • 74
  • 1
    Yep... unfortunately almost a year a year has gone by and we've only seen about a 1% increase. – cereallarceny Jan 22 '14 at 15:38
  • Wonder how we can help it grow faster, though. – icedwater Jan 23 '14 at 07:06
  • 1
    We can't. That's up to the creators of various browsers. – cereallarceny Jan 23 '14 at 19:29
  • 2
    It’s silly to include all that cross-browser gradient stuff when it’s behind a WebKit-specific pseudo-element selector that Mozilla and IE will never parse. – Hugh Guiney Aug 19 '14 at 20:27
  • I've been looking all over on how to get the border around a meter bar gone and nothing worked, what it did worked was this so adding my vote, thank you! – ProgrammerV5 May 04 '18 at 17:40
  • 3
    This answer is outdated. The current browser support is good (only IE-11 is lacking support). There is a way to style this element cross browser, but this answer only gives answer for webkit derived browsers. – Rúnar Berg May 15 '19 at 18:34
  • Article was updated again in 2021 and Chris coyier reverted his position and now recommends: `Semantically, you’re probably better off looking at the and elements` – KyleMit Mar 10 '23 at 19:00
  • At least with current Version Chrome, you need meter { -webkit-appearance:default;} for the following styling to work - otherwise it isn't displayed – Pete Jul 11 '23 at 10:00
5

Below are the rules for FireFox. I included a screenshot on where to find the rules in the Firefox inspector.

::-moz-meter-bar {
  /* Block styles that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;

  -moz-appearance: meterchunk;
  height: 100%;
  width: 100%;
}

:-moz-meter-optimum::-moz-meter-bar {
  /* green. */
  background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
  /* orange. */
  background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  /* red. */
  background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

where to find Mozilla CSS properties

Rezen
  • 435
  • 1
  • 8
  • 23
4

For anyone looking for a non-trivial style in 2021, it's certainly possible to create any kind of meter you want through creative use of the background-image property and friends.

The only difference between firefox and chrome is the background: none;

Safari requires -webkit-appearance: none, while Chrome requires -webkit-appearance: meter, so they are incompatible. The hack to make this work is out of scope for this answer.

.scaffolding {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 8px;
}
label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 0;
}

meter,
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-webkit-meter-inner-element {
    background: none;
    border-radius: 0;
    border: none;
    width: 100%;
    height: 4rem;
}

meter { 
    appearance: none;
    -moz-appearance: meter;
    -webkit-appearance: meter;
    width: 20rem; //very important

}

meter::-webkit-meter-optimum-value { 
    background-image: repeating-linear-gradient(to right,
     transparent 0rem, transparent 0.25rem, 
     green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
     green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
     green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
     green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
    repeating-linear-gradient(to right, 
    transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
    background-size: 2.5rem 3rem, 2.5rem 4rem;
    background-position-y: center, center;
    background-repeat: repeat-x, repeat-x;
}
meter::-moz-meter-bar { 
    background: none;
    background-image: repeating-linear-gradient(to right,
     transparent 0rem, transparent 0.25rem, 
     green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
     green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
     green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
     green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
    repeating-linear-gradient(to right, 
    transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
    background-size: 2.5rem 3rem, 2.5rem 4rem;
    background-position-y: center, center;
    background-repeat: repeat-x, repeat-x;
}
<div class="scaffolding">
  <label>40</label>
  <meter min="0" max="40" value="40"></meter>
  <label>20</label>
  <meter min="0" max="40" value="20"></meter>
  <label>15</label>
  <meter min="0" max="40" value="15"></meter>
  <label>35</label>
  <meter min="0" max="40" value="35"></meter>
  <label>4</label>
  <meter min="0" max="40" value="4"></meter>
</div>
I'll Eat My Hat
  • 1,150
  • 11
  • 20
4

Meter elements look like progress bars used elsewhere on the platform you are on. try this to replace the meter elements:

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>
badfur
  • 452
  • 3
  • 8
  • 7
    3 elements in the price of 1? What a ripoff! – Madara's Ghost Nov 13 '11 at 12:46
  • your right .. this isn't a real answer because there is none.. maybe this could help to understand why: http://www.w3schools.com/html5/tag_meter.asp http://www.w3schools.com/html5/tag_progress.asp -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o- Opera Software -atsc- Advanced Television Standards Committee -wap- The WAP Forum -webkit- Safari,Chrome (and other WebKit-based browsers) -khtml- Konqueror browser – badfur Nov 15 '11 at 09:34
  • with the accepted answer not working in many browsers , and ie11 not supporting the meter tag at all , this isnt a bad answer – Tom Jul 28 '17 at 18:22
0

You can style the meter size and position using something like the following in your css:

meter {
    margin: 0 auto 4.5em;
    width: 450px;
    height: 50px;
    display: block;
}

For colours, you need to use a webkit appropriate to your browser.