Home/ Questions/Q 8637955
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:36:15+00:00

I am working on a website which uses scales for showing stats. I have

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0