I am working on a website which uses scales for showing stats.
I have created background gradients for each scale using CSS3 and the HTML5 meter element as in this tutorial:
HTML5-Meter-Shim
It works on all browsers expect Chrome and Opera, which show the default color.
Is this possible in Chrome and Opera, or is there any other solution?
Here's my work: http://jsfiddle.net/KRnUd/2/
Use RGB color syntax, background-image instead of background, and meter attributes to get it fully working in Chrome and partially working in Opera:
<!doctype html>
<html lang="en">
<head>
<title>Meter Usage</title>
<style type="text/css">
meter {
display: inline-block;
height: 16px;
width: 200px;
overflow: hidden;
background-color: rgb(237,237,237);
background-image: -webkit-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Opera 11.10+ */
}
</style>
</head>
<body>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"/>
</body>
</html>