<meter>

HTML <meter> Tag

The <meter> tag is one of the HTML5 elements. The tag defines a scalar measurement in the known range or graphic representation of a fractional number. The tag can be used when it is necessary to display, for example, the level of battery charge, disk usage, etc. To use the <meter> tag, you need to know the maximum value.

Syntax

Syntax （语法）

The <meter> tag comes in pairs. The content is written between the opening (<meter>) and closing (</meter>) tags.

Example of the HTML <meter> tag: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br>
   <meter value="0.75">75%</meter> 75%
 </body>
</html>

Result

The <meter> tag isn’t used to indicate progress. For that purpose, use the <progress> tag.

Use CSS background-color, box-shadow, width and height properties to style the <progress> element.

Example of the HTML <progress> tag used with CSS background-color, box-shadow, width and height properties: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     progress[value] {
       -webkit-appearance: none;
       appearance: none;
       width: 220px;
       height: 20px;
     }
     progress[value]::-webkit-progress-bar {
       background-color: #eee;
       box-shadow: 0 0 3px #666 inset;
     }
     progress[value]::-webkit-progress-value {
       background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
       -webkit-linear-gradient(top, #96f204, #8ebf42),
       -webkit-linear-gradient(right, #96f204, #8ebf42);
       background-size: 40px 20px,  10%;
     }
   </style>
 </head>
 <body>
   <p>Downloading:
     <progress value="35" max="100"></progress>
     <span>35%</span>
   </p>
   <p>Progress bar:
     <progress value="80" max="100"></progress>
     <span>80%</span>
   </p>
 </body>
</html>

Displaying a Number Range

Displaying a Number Range （显示数字范围）

Using the min and max attributes of the display property will show a score inside of a specified range. Use the optimum attribute to define the desired number, for example, a pass mark in a test. But take into account that this is not supported by some browsers. （使用display属性的min和max属性将显示指定范围内的分数。使用最佳属性来定义所需的数字，例如，测试中的合格分数。但请注意，某些浏览器不支持此功能。）

<meter value="15" min="0" max="70" optimum="60"></meter>

Displaying a Percentage

Displaying a Percentage （显示百分比）

<meter value="0.8">80%</meter>

Styling the HTML <meter> tag:

Styling the HTML <meter> tag:

First of all, put the sizes with the help of the width and height properties. （首先，借助宽度和高度属性放置尺寸。）

meter {
 width: 300px;
 height: 20px;
}

Here, you need to use fallbacks because separate pseudo-classes are provided by the A-grade browsers to style the <meter> element. We will use the Webkit/Blink fallback. It provides the following pseudo-classes:

Pseudo-classDescription
-webkit-meter-inner-elementAdditional markup that is used for rendering the meter element as read-only.
-webkit-meter-barIt contains meter gauge holding the value.
-webkit-meter-optimum-valueThe current value of the meter element which is by default green when the value attribute falls within the low-high range.
-webkit-meter-suboptimum-valueThe meter tag becomes yellow when the value attribute is outside the low-high range.
-webkit-meter-even-less-good-valueThe meter tag becomes red when the value and the optimum attributes are outside the low-high range but in opposite zones. For example, value < low < high < optimum or value > high > low > optimum.

Then, we’ll need to set the default appearance of the meter gauge to “none”.

meter {
 -webkit-appearance: none;
}

In our example, we will use the -webkit-meter-bar and -webkit-meter-optimum-value pseudo-classes. （在我们的示例中，我们将使用-webkit-meter-bar和-webkit-meter-optimum-value伪类。）

meter::-webkit-meter-bar {
 background: none;
 background-color: lightgrey;
 box-shadow: 0 3px 3px -3px #333 inset;
}

meter::-webkit-meter-optimum-value {
 box-shadow: 0 3px 3px -3px #999 inset;
 background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
 background-size: 100% 100%;
}

Each color in the background linear gradient presents the space that is consumed by the sub-categories. （背景线性渐变中的每种颜色都表示子类别消耗的空间。）

meter::-webkit-meter-optimum-value {
 -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
 background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
 transition: width .5s;
 width: 100%;
}

Example of styling the HTML <meter> tag: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     meter {
       width: 300px;
       height: 20px;
     }
     meter::-webkit-meter-bar {
       background: none;
       background-color: lightgrey;
       box-shadow: 0 3px 3px -3px #333 inset;
     }
     meter::-webkit-meter-optimum-value {
       box-shadow: 0 3px 3px -3px #999 inset;
       background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
       background-size: 100% 100%;
     }
   </style>
 </head>
 <body>
   <meter value="30" min="0" max="70"></meter>
 </body>
</html>

Both the transition and animation properties on the <meter> element are supported by Webkit browsers. Change the width of the value (on :hover) using transitions and animate the background-position of the container with keyframes.

Example of styling the HTML <meter> tag with the CSS transition property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     meter {
       width: 300px;
       height: 20px;
     }
     meter::-webkit-meter-bar {
       background: none;
       background-color: lightgrey;
       box-shadow: 0 3px 3px -3px #333 inset;
     }
     meter::-webkit-meter-optimum-value {
       -webkit-transition: width .5s;
       box-shadow: 0 5px 5px -5px #999 inset;
       background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
       background-size: 100% 100%;
     }
     meter::-webkit-meter-optimum-value:hover {
       /* Reset each sub-category to 20% */
（/*将每个子类别重置为20% */）
       background-image: linear-gradient( 90deg, #2286c9 20%, #FF00FF 20%, #FF00FF 40%, #04C319 40%, #04C319 60%, #F1F70D 60%, #F1F70D 80%, #00FFCC 80%, #00FFCC 100%);
       transition: width .5s;
       width: 100% !important;
     }
   </style>
 </head>
 <body>
   <meter value="25" min="0" max="70"></meter>
 </body>
</html>

Pseudo-elements on meter gauge are supported only by Webkit browsers. The pseudo-elements can be used for displaying the meta information above the meter gauge. （仪表上的伪元素仅受Webkit浏览器支持。伪元素可用于在仪表上方显示元信息。）

meter {
 margin: 2em;
 position: relative;
}

meter::before {
 content: 'Used storage';
 position: absolute;
 top: -100%;
}

meter::after {
 content: 'Free storage';
 position: absolute;
 top: -100%;
 right: 0;
}

Example of the HTML <meter> tag used with pseudo-elements: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     meter {
       margin: 2em;
       width: 400px;
       height: 30px;
       position: relative;
     }
     meter::before {
       content: 'Used storage';
       position: absolute;
       top: -100%;
     }
     meter::after {
       content: 'Free storage';
       position: absolute;
       top: -100%;
       right: 0;
     }
     meter::-webkit-meter-bar {
       background: none;
       background-color: lightgray;
       box-shadow: 0 5px 5px -5px #333 inset;
     }
     meter::-webkit-meter-optimum-value {
       -webkit-transition: width .5s;
       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::-webkit-meter-optimum-value:hover {
       /* Reset each sub-category to 20% */
（/*将每个子类别重置为20% */）
       background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
       transition: width .5s;
       width: 100% !important;
       /* !important required. to override the inline styles in WebKit. */
（/*! important required.覆盖WebKit中的内联样式。*/）
     }
   </style>
 </head>
 <body>
   <meter value="25" min="0" max="70"></meter>
 </body>
</html>

Now, let’s use the Firefox fallback. 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”.

meter {
 -moz-appearance: none;
 width: 400px;
 height: 30px;
}

The Firefox uses the following pseudo-classes:

Pseudo-classDescription
-moz-meter-barRepresents the meter gauge’s current value to style the properties of the meter gauge value.
-moz-meter-optimumThe meter tag becomes green when the value attribute is inside the low-high range.
-moz-meter-sub-optimumThe meter tag becomes yellow when the value attribute is outside the low-high range.
-moz-meter-sub-sub-optimumThe meter element becomes red when the value and the optimum attributes are outside the low-high range but in opposite zones. For example, value < low < high < optimum or value > high > low > optimum.

Here, we will style the background of the meter gauge value using the ::-moz-meter-bar pseudo-class.

meter::-moz-meter-bar {
 box-shadow: 0 5px 5px -5px #999 inset;
 background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
 background-size: 100% 100%;
}

In Firefox, you can use the meter selector itself to style the background of the container. （在Firefox中，您可以使用仪表选择器本身来设置容器背景的样式。）

meter {
 background: none;
 background-color: lightgray;
 box-shadow: 0 5px 5px -5px #333 inset;
}

Example of the HTML <meter> tag for Firefox: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     meter {
       width: 400px;
       height: 30px;
       background: none;
       /* Required to get rid of the default background property */
（/*需要删除默认的background属性*/）
       background-color: lightgray;
       box-shadow: 0 5px 5px -5px #333 inset;
     }
     meter::-moz-meter-bar {
       box-shadow: 0 5px 5px -5px #999 inset;
       background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
       background-size: 100% 100%;
     }
   </style>
 </head>
 <body>
   <meter value="30" min="0" max="70"></meter>
 </body>
</html>

The ::before and ::after pseudo elements on the meter gauge are not supported by Firefox. The support for CSS3 transitions and animation is weak, too.

Attributes

Attributes （属性）

AttributeValueDescription
formform_idIndicates form (forms), which the <meter> tag belongs to.
highnumberIndicates high values (but not maximum ones). If the high value is less than the low, then the high = low. If high is set larger than max, then high = max.
lownumberDefines law values (but not minimal ones). This value must be less than high. If the low value is less than the min, then low = min.
maxnumberDefines the maximum possible value. The default value is 1.
minnumberDefines the minimum possible value. The default value is 0.
optimumnumberDefines the optimal number, which must be within the range defined by the min and max attributes.
It may be larger than the high value.
Color depends on the location of the optimum:
red: min ≤ optimum < low
yellow: low ≤ optimum ≤ high
green: high < optimum ≤ max
valuenumberSets the current value, which must be within the range, defined by the min and max attributes.
Required attribute.

The<meter> tag supports the Global Attributes and the Event Attributes.

← <meta>
<nav> →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部