How to Display HTML Meter element Vertically

By default, a meter element is displayed horizontally on a browser. See this example. However, you can display the meter element vertically using CSS transform property.

Display HTML meter element vertically

You can learn more about the <meter> element here.

There is a method to tilt an element using CSS. So, I going to apply that method to the <meter> element. Check this out.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Meter element example</title>
  <style> 
    meter {
      /* for Firefox: Change default appearance */
      -moz-appearance: none;

      width: 170px;
      height: 120px;
      margin: 40px 0;
      
      /*  tilt the meter to display vertically */
      transform: rotate(-90deg);
      -ms-transform: rotate(-90*0deg);	 /*  for IE  */
    }
    
    /*  add style to change the look and feel */
    meter::-webkit-meter-bar {
      background: #eeeeee;
      border-radius: 2px;
    }
    
    /*  show dynamic content (a text) next to the meter element */
    meter::after {
      content: attr(power);
    }
  </style>
</head>
<body>
   <p><label for='battery'>Select a value: </label>
     <select id='battery' name='nwords'>
       <option value="">-- power --</option>
       <option value="10">10%</option>
       <option value="15">15%</option>
       <option value="25">25%</option>
       <option value="30">30%</option>
       <option value="40">40%</option>
       <option value="50">50%</option>
       <option value="80">80%</option>
     </select>
  </p>
 
  <p>
    /*  the meter tag with attributes */
    <meter id='battery-power' min='0' low='20' high='50' 
       max='100' optimum='60'
       value='40' power='40% power left'>

      40% power left
    </meter>
  </p>
</body>
<script>
  let power = document.getElementById('battery');
  
  power.addEventListener ('change', function () {
    let mt = document.getElementById('battery-power'); 
    mt.value = this.value;
    
    // show how much power is left
    mt.setAttribute('power', + this.value + '% power left');
  });
</script>
</html>

Try it

So, that’s how you display the <meter> element vertically on your web page. It’s a simple CSS trick. Simply rotate the element according to you requirement.

Now, if you want to change the transform property dynamically using JS, check this post.

← PreviousNext →