有没有办法改变HTML米的背景颜色？
我知道，默认情况下它的背景颜色是绿色。
这可以将其背景颜色从绿色更改为任何其他颜色吗？
我尝试使用style属性但它仍然保持绿色。
<meter style="background-color:red;"min="0" low="40" high="95" max="100" value="65">
</meter>
答案 0 :(得分：6)
meter::-webkit-meter-optimum-value {
background: red; /* Green */
}<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>
答案 1 :(得分：4)
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>
答案 2 :(得分：3)
表示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;}
答案 3 :(得分：2)
您需要相应地选择仪表值和样式，如需更多输入，请参阅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>
答案 4 :(得分：1)
<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>
meter::-webkit-meter-optimum-value {
background: red; /* Green */
}
答案 5 :(得分：1)
将其留给其他寻求仪表帮助的人。
我最近创建了一个自定义仪表，而不是使用内置的html仪表。目的是进行完全定制。以下是我想出的一个例子。完整的软件包可以在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>