Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles
Last updated on : 2023-03-20
The method of indicating a current level of a gauge.
HTML Standard # the-meter-element
default-style.html
Source:default-style.html
1<!DOCTYPE html>2<html>3 <link rel='stylesheet' type='text/css' href='style.css'>4 <body>5 <meter value="0.0" low="0.3" optimum="0.0" high="0.7"></meter>6 <meter value="0.1" low="0.3" optimum="0.0" high="0.7"></meter>7 <meter value="0.3" low="0.3" optimum="0.0" high="0.7"></meter>8 <meter value="0.5" low="0.3" optimum="0.0" high="0.7"></meter>9 <meter value="0.7" low="0.3" optimum="0.0" high="0.7"></meter>10 <meter value="0.8" low="0.3" optimum="0.0" high="0.7"></meter>11 <meter value="1.0" low="0.3" optimum="0.0" high="0.7"></meter>12 13 <meter value="0.0" low="0.3" optimum="0.1" high="0.7"></meter>14 <meter value="0.1" low="0.3" optimum="0.1" high="0.7"></meter>15 <meter value="0.3" low="0.3" optimum="0.1" high="0.7"></meter>16 <meter value="0.5" low="0.3" optimum="0.1" high="0.7"></meter>17 <meter value="0.7" low="0.3" optimum="0.1" high="0.7"></meter>18 <meter value="0.8" low="0.3" optimum="0.1" high="0.7"></meter>19 <meter value="1.0" low="0.3" optimum="0.1" high="0.7"></meter>20 21 <meter value="0.0" low="0.3" optimum="0.3" high="0.7"></meter>22 <meter value="0.1" low="0.3" optimum="0.3" high="0.7"></meter>23 <meter value="0.3" low="0.3" optimum="0.3" high="0.7"></meter>24 <meter value="0.5" low="0.3" optimum="0.3" high="0.7"></meter>25 <meter value="0.7" low="0.3" optimum="0.3" high="0.7"></meter>26 <meter value="0.8" low="0.3" optimum="0.3" high="0.7"></meter>27 <meter value="1.0" low="0.3" optimum="0.3" high="0.7"></meter>28 29 <meter value="0.0" low="0.3" optimum="0.5" high="0.7"></meter>30 <meter value="0.1" low="0.3" optimum="0.5" high="0.7"></meter>31 <meter value="0.3" low="0.3" optimum="0.5" high="0.7"></meter>32 <meter value="0.5" low="0.3" optimum="0.5" high="0.7"></meter>33 <meter value="0.7" low="0.3" optimum="0.5" high="0.7"></meter>34 <meter value="0.8" low="0.3" optimum="0.5" high="0.7"></meter>35 <meter value="1.0" low="0.3" optimum="0.5" high="0.7"></meter>36 37 <meter value="0.0" low="0.3" optimum="0.7" high="0.7"></meter>38 <meter value="0.1" low="0.3" optimum="0.7" high="0.7"></meter>39 <meter value="0.3" low="0.3" optimum="0.7" high="0.7"></meter>40 <meter value="0.5" low="0.3" optimum="0.7" high="0.7"></meter>41 <meter value="0.7" low="0.3" optimum="0.7" high="0.7"></meter>42 <meter value="0.8" low="0.3" optimum="0.7" high="0.7"></meter>43 <meter value="1.0" low="0.3" optimum="0.7" high="0.7"></meter>44 45 <meter value="0.0" low="0.3" optimum="0.8" high="0.7"></meter>46 <meter value="0.1" low="0.3" optimum="0.8" high="0.7"></meter>47 <meter value="0.3" low="0.3" optimum="0.8" high="0.7"></meter>48 <meter value="0.5" low="0.3" optimum="0.8" high="0.7"></meter>49 <meter value="0.7" low="0.3" optimum="0.8" high="0.7"></meter>50 <meter value="0.8" low="0.3" optimum="0.8" high="0.7"></meter>51 <meter value="1.0" low="0.3" optimum="0.8" high="0.7"></meter>52 53 <meter value="0.0" low="0.3" optimum="1.0" high="0.7"></meter>54 <meter value="0.1" low="0.3" optimum="1.0" high="0.7"></meter>55 <meter value="0.3" low="0.3" optimum="1.0" high="0.7"></meter>56 <meter value="0.5" low="0.3" optimum="1.0" high="0.7"></meter>57 <meter value="0.7" low="0.3" optimum="1.0" high="0.7"></meter>58 <meter value="0.8" low="0.3" optimum="1.0" high="0.7"></meter>59 <meter value="1.0" low="0.3" optimum="1.0" high="0.7"></meter>60 </body>...
bar-pseudo-element.html
Source:bar-pseudo-element.html
1<!DOCTYPE html>2<html>3 <link rel='stylesheet' type='text/css' href='style.css'>4 <style>5 body > meter:nth-child(1)::-moz-meter-bar { margin: 10px; padding: 0px; }6 body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 10px; }7 body > meter:nth-child(3)::-moz-meter-bar { margin: 10px; padding: 10px; }8 body > meter:nth-child(4)::-moz-meter-bar { margin: 5px; padding: 5px; }9 body > meter:nth-child(5)::-moz-meter-bar { margin: 50px; padding: 50px; }10 body > meter:nth-child(6)::-moz-meter-bar { margin: 100px; padding: 100px; }11 body > meter:nth-child(7)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }12 body > meter:nth-child(8)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }13 body > meter:nth-child(9)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }14 body > meter:nth-child(10)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }15 body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }16 body > meter:nth-child(12)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }17 body > meter:nth-child(13)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }18 body > meter:nth-child(14)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }19 body > meter:nth-child(15)::-moz-meter-bar { margin: 200px; padding: 0px; }20 body > meter:nth-child(16)::-moz-meter-bar { margin: 0px; padding: 200px; }21 body > meter:nth-child(17)::-moz-meter-bar { width: 1000px; }22 body > meter:nth-child(18)::-moz-meter-bar { width: 10px; }23 body > meter:nth-child(19)::-moz-meter-bar { width: 10%; }24 body > meter:nth-child(20)::-moz-meter-bar { width: 200%; }25 </style>26 <body>27 <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->28 <meter value='1'></meter>29 <meter value='1'></meter>30 <meter value='1'></meter>31 <meter value='1'></meter>32 <meter value='1'></meter>33 <meter value='1'></meter>34 <meter value='1'></meter>35 <meter value='1'></meter>36 <meter value='1'></meter>37 <meter value='1'></meter>38 <meter value='1'></meter>39 <meter value='1'></meter>40 <meter value='1'></meter>41 <meter value='1'></meter>42 <meter value='1'></meter>43 <meter value='1'></meter>44 <!-- Those will be used to change width. -->45 <meter value='1'></meter>46 <meter value='1'></meter>47 <meter value='1'></meter>48 <meter value='1'></meter>49 </body>...
Browser Support For Safari on iOS Versions
Browser Support For Android Browser Versions
Browser Support For Chrome for Android Versions
Browser Support For Firefox for Android Versions
Debug webpages on the go with LT Debug Chrome extension.
Add to ChromeTest your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for meter element and many more web technologies that are a part of your website or web-application.
Last Modified date
2023-03-20
Data sourced from
Debug webpages on the go with LT Debug Chrome extension.
Add to ChromeHarness the power of Chromium-based engine to deliver responsive websites and web apps.
Try for freeGet 100 minutes of automation test minutes FREE!!