如何更改 HTML 仪表的背景颜色？

Question

Is there a way to change the background color of HTML meter?

I know ,by default its background color is green.

Is this possible to change its background color from green to any other color?

I tried with the style attribute but it still remains green.

 <meter style="background-color:red;"min="0" low="40" high="95" max="100" value="65">
 </meter>

Answer 1

 meter::-webkit-meter-optimum-value { background: red; /* Green */ }

 <meter min="0" low="40" high="95" max="100" value="65" col> </meter>

Answer 2

 meter::-webkit-meter-optimum-value { background: red; } meter::-moz-meter-bar { /* Firefox Pseudo Class */ background: red; }

 <meter min="0" low="40" high="95" max="100" value="65"> </meter>

Answer 3

for chrome:

/*meter */
meter::-webkit-meter-bar {background: #e6e6e9;} /*background color of bar*/
meter::-webkit-meter-optimum-value {background: green;}
meter::-webkit-meter-suboptimum-value{background:orange;}
meter::-webkit-meter-even-less-good-value{background:red;}

for firefox:

/*meter */
/*bar with only one possible color*/
meter::-moz-meter-bar {background: red;}  /* color of bar*/

/* bar with different colors*/
/* between "low" and "high" thresholds*/
meter::-moz-meter-optimum-value {background: lightgreen;} 
/*below "low" threshold or above "high" threshold*/
meter::-moz-meter-suboptimum-value{background:gold;}  

Answer 4

You need to select the meter value and than style accordingly, and for more inputs refer this link .

 meter::-webkit-meter-optimum-value { box-shadow: 0 5px 5px -5px #999 inset; background-image: linear-gradient( 90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100% ); background-size: 100% 100%; }

 <meter value="0.6"></meter>

Answer 5

 <meter min="0" low="40" high="95" max="100" value="65" col> </meter> meter::-webkit-meter-optimum-value { background: red; /* Green */ }

Answer 6

Leaving this here for anyone else looking for meter help.

I recently created a custom meter instead of using the built-in html meter. The purpose was for complete customization. Below is an example of what I came up with. The complete package can be found @ Github .

 var inlineCSS = function(id, attribute, value) { switch (attribute) { /* layer 1 attributes */ case 'meter-color': $(id)[0].style.backgroundColor = value; $(id)[0].style.backgroundImage = "none"; break; case 'meter-length': var lengthArr = ["super-long", "x-long", "long", "normal", "short", "x-short", "super-short"]; var lengthSizes = ["95%", "80%", "65%", "50%", "35%", "20%", "5%"]; if (jQuery.inArray(value, lengthArr) !== -1) { $(id)[0].style.width = lengthSizes[jQuery.inArray(value, lengthArr)]; } else { $(id)[0].style.width = value; } break; case 'meter-thickness': var heightArr = ["super-thick", "x-thick", "thick", "thin", "x-thin", "super-thin"]; var heightSizes = [30 * 1.75, 30 * 1.5, 30 * 1.25, 30 * 0.75, 30 * 0.5, 30 * 0.25]; if (jQuery.inArray(value, heightArr) !== -1) { $(id)[0].style.height = heightSizes[jQuery.inArray(value, heightArr)] + "px"; } break; case 'meter-shadow': $(id)[0].style.boxShadow = value; break; case 'animation-speed': $(id)[0].style.animation = "move " + value + "s linear infinite"; break; /* layer 3 attributes */ case 'reveal-width': $(id)[0].style.backgroundImage = "linear-gradient(to right, transparent " + value + ", #555 " + value + ")"; break; /* layer 4 attributes */ case 'font-size': $(id)[0].style.fontSize = value; break; } }; $(document).ready(function() { $(".meter > span").each(function() { $(this).data("origWidth", ($(this).width() / $(this).parent().width()) * 100) .width(0) .animate({ width: $(this).data("origWidth") + "%" }, 3600); }); $(".meter").each(function() { /** * options : meter options passed by data-options attribute * selector : value used to reference html element for meter update */ var options = $(this).data("options"); var selector = "div#" + $(this).attr("id") + ".meter"; for (var x in options) { if (jQuery.inArray(x, ["meter-color", "meter-length", "meter-thickness", "meter-shadow"]) !== -1) { inlineCSS(selector, x, options[x]); } else if (jQuery.inArray(x, ["candystripe-color", "animation-speed"]) !== -1) { inlineCSS(selector + " > span", x, options[x]); } else if (jQuery.inArray(x, ["reveal-width"]) !== -1) { inlineCSS(selector + " > span > span", x, options[x]); } else if (jQuery.inArray(x, ["font-size", "font-color"]) !== -1) { inlineCSS(selector + " > span > span > span", x, options[x]); } else { continue; } } }); });

 body { background-color: #333; font-size: 2em; } /* animated layered bars defaults */ .meter { font-family: monospace; position: relative; width: 100%; height: 30px; margin: 10px 0; background-color: #555; padding: 0; background-image: linear-gradient( 90deg, red, orange, yellow, lime, green); border: 1px solid #000; z-index: 1; } .meter>span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-size: 50px 50px; -webkit-animation: move 2s linear infinite; animation: move 2s linear infinite; overflow: hidden; z-index: 2; } .meter>span>span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; width: 100%; height: 100%; z-index: 3; } .meter>span>span>span { display: block; width: calc(100% - 2px); text-align: center; font-variant: small-caps; font-weight: bolder; background: linear-gradient(to right, #ff0000 0%, #ffa500 25%, #ffff00 50%, #00ff00 75%, #008000 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #000; } /* animations */ @-webkit-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* rounded borders */ .meter-rounded, .meter-rounded>span { border-radius: 25px; } .meter-rounded-trbl, .meter-rounded-trbl>span { border-radius: 0 25px; } .meter-rounded-tlbr, .meter-rounded-tlbr>span { border-radius: 25px 0; } .meter-rounded-bottom, .meter-rounded-bottom>span { border-radius: 0 0 25px 25px; } .meter-rounded-top, .meter-rounded-top>span { border-radius: 25px 25px 0 0; } .meter-rounded-left, .meter-rounded-left>span { border-radius: 25px 0 0 25px; } .meter-rounded-right, .meter-rounded-right>span { border-radius: 0 25px 25px 0; } /* remove candystripping */ .no-stripes>span { -webkit-animation: none !important; animation: none !important; background-image: none !important; } /* remove animation */ .no-animation>span { -webkit-animation: none !important; animation: none !important; }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <div id='defaultMeter' class='meter' data-options='{}'> <span> <span> <span>This is the default result.</span> </span> </span> </div> <hr> <div id='customMeter' class='meter meter-rounded' data-options='{"meter-color":"black","animation-speed":1}'> <span> <span> <span>This is a custom result.</span> </span> </span> </div> <hr> <div id='customMeter1' class='meter meter-rounded-right' data-options='{"meter-color":"red","animation-speed":6,"meter-shadow":"1px 1px 5px 2px #222","meter-length":"long"}'> <span> <span> <span>This is a custom result.</span> </span> </span> </div> <hr> <div id='customMeter2' class='meter' data-options='{"meter-color":"orange","animation-speed":4,"meter-shadow":"inset 0 0 2px 2px #222","reveal-width":"67%"}'> <span> <span> <span>This custom result has a reveal set @ 67%.</span> </span> </span> </div>

Answer 7

I also made a custom meter. It's really just a few lines of code and allows for much more flexibily than the built-in tag. And it's browser-independent.

 function changeMeter(val){ //add as many colors/conditions as you wish let color = val < 33 ? "red" : val < 66 ? "orange" : "green" document.getElementById('meter').style = `width:${val}%;background:${color};` } changeMeter(document.getElementById('meterinput').value) //get some initial value onload

 .metercontainer{ background: #000; overflow: hidden; width: 80px; height: 12px; border: 1px solid #8F8F9D; border-radius: 6px; box-sizing: border-box; } #meter{ height: 100%; }

 <div class="metercontainer"> <div id="meter"></div> </div> <input type="number" id="meterinput" onchange="changeMeter(this.value)" min="0" max="100" value="69">