Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Meter-Element styling</title>
</head>
<body>
  Optimal meter, or no optimum: <meter value="700" min="0" max="900"></meter><br />
  Value between optimum and low: <meter min="0" max="900" value="500" low="200" high="800" optimum="900"></meter><br />
  Value below low: <meter min="0" max="900" value="200" low="300" high="800" optimum="900"></meter>
</body>
</html>
 
meter {
  -webkit-appearance: none;
}
meter::-webkit-meter-bar {
  border: 2px solid black;
}
meter::-webkit-meter-bar {
  background: lightblue;
}
meter::-webkit-meter-optimum-value {
  background: green;
}
meter::-webkit-meter-suboptimum-value {
  background: orange;
}
meter::-webkit-meter-even-less-good-value {
  background: red;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers