SaurabhLP SaurabhLP - 1 year ago 72
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

element as in this tutorial:

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:

Answer Source

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">
        <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+ */
        <meter min="1024" max="10240" low="2048" high="8192" value="9216"/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download