Is It Possible to Create a Vertical Meter With HTML5?


Normally, if I create:

<meter value="30" max="100">Low</meter>

I'll end up with a horizontal meter/bar if viewed on a browser that supports the html5 meter element.

Is it possible to create a vertical meter with html5?

The only solution I've been able to come up with so far is using CSS3 rotation (transform).

Problem courtesy of: uglymunky


Transform is the answer. The whole point of meter is that it's a semantic, not a presentational element and you should be able to style it however you want with CSS>

Solution courtesy of: Michael Mullany


Yeah transform is the only way to do this..

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Discussion courtesy of: Ben Collier

This recipe can be found in it's original form on Stack Over Flow.