Menu
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).
345
According to the latest HTML5 working draft, the progress tag is best used to display the progress of a specific task at hand. meter is best used for task-unrelated guages, such as disk space or memory usage. The progress element represents the completion progress of a task.
Paint the meter gauge using the -moz-appearence: meterbar. If you don't need the default bevel and emboss set the -moz-appearence to "none". Represents the meter gauge's current value to style the properties of the meter gauge value. The meter tag becomes green when the value attribute is inside the low-high range.
The <meter> element represents a scalar measurement within a known range, or a fractional value.
Yeah transform is the only way to do this..
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
answered Sep 22 '22 12:09
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>
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
