SaurabhLP SaurabhLP - 18 days ago 6
CSS Question

HTML5/Jquery Meter Shim : Change Background in Chrome/Opera

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/

Answer

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>

Comments