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

有没有办法改变HTML的背景颜色

我知道，默认情况下它的背景色是绿色的

是否可以将其背景颜色从绿色更改为任何其他颜色

我尝试了样式属性，但它仍然是绿色的

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

仪表：：-webkit仪表最佳值{
背景：红色；
}
meter:：-moz meter bar{/*Firefox伪类*/
背景：红色；
}

---

您需要相应地选择仪表值和样式，有关更多输入，请参阅此

仪表：：-webkit仪表最佳值{
盒影：0 5px 5px-5px#999插图；
背景图像：线性梯度(
90度，
#8bcf69 5%，
#e6d450 5%，
#e6d450 15%，
#f28f68 15%，
#f28f68 55%，
#cf82bf 55%，
#cf82bf 95%，
#719fd1 95%，
#719fd1 100%
);
背景大小：100%100%；
}

仪表：：-webkit仪表最佳值{
背景：红色；/*绿色*/
}

仪表：：-webkit仪表最佳值{
背景：红色；/*绿色*/
}

对于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;}

对于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;}  

---

把这个留给其他需要帮助的人

我最近创建了一个自定义米，而不是使用内置的html米。目的是完全定制。下面是我想出的一个例子。完整的软件包可以在@中找到

var inlineCSS=函数（id、属性、值）{
开关（属性）{
/*第1层属性*/
“仪表颜色”案例：
$（id）[0].style.backgroundColor=value；
$（id）[0].style.backgroundImage=“无”；
打破
案例“米长”：
var lengthArr=[“超长”、“x长”、“长”、“正常”、“短”、“x短”、“超短”]；
var长度大小=[“95%，“80%，“65%，“50%，“35%，“20%，“5%”]；
if（jQuery.inArray（value，lengthArr）！=-1）{
$（id）[0].style.width=lengthSizes[jQuery.inArray（value，lengthArr）]；
}否则{
$（id）[0].style.width=value；
}
打破
“米厚”箱：
var heightArr=[“超厚”、“x厚”、“厚”、“薄”、“x薄”、“超薄”]；
变量高度大小=[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=heightsize[jQuery.inArray（value，heightArr）]+“px”；
}
打破
“米影”一案：
$（id）[0].style.boxShadow=value；
打破
案例“动画速度”：
$（id）[0].style.animation=“move”+value+“s linear infinite”；
打破
/*第3层属性*/
案例“揭示宽度”：
$（id）[0].style.backgroundImage=“线性渐变（向右，透明“+value+”，#555”+value+”）；
打破
/*第4层属性*/
大小写“字体大小”：
$（id）[0].style.fontSize=value；
打破
}
};
$（文档）.ready（函数（）{
$（“.meter>span”）。每个（函数（）{
$（this）.data（“origWidth”，（$（this.width（）/$（this.parent（）.width（））*100）
.宽度（0）
.制作动画({
宽度：$（此）.data（“origWidth”）+“%”
}, 3600);
});
$（“.meter”）。每个（函数（）{
/**
*选项：通过数据选项属性传递的仪表选项
*选择器：用于为仪表更新引用html元素的值
*/
var options=$（this）.data（“options”）；
var selector=“div#”+$（this.attr（“id”）+.meter”；
用于（选项中的var x）{
如果（jQuery.inArray（x，[“米颜色”、“米长度”、“米厚度”、“米阴影”）！=-1）{
inlineCSS（选择器，x，选项[x]）；
}否则
if（jQuery.inArray（x，[“烛光颜色”，“动画速度]）！=-1）{
inlineCSS（选择器+“>span”，x，选项[x]）；
}否则
if（jQuery.inArray（x，[“显示宽度]）！=-1）{
inlineCSS（选择器+“>span>span”，x，选项[x]）；
}否则
if（jQuery.inArray（x，[“字体大小”，“字体颜色]）！=-1）{
inlineCSS（选择器+“>span>span>span”，x，选项[x]）；
}否则{
继续；
}
}
});
});
正文{
背景色：#333；
字号：2em；
}
/*动画分层条默认设置*/
.米{
字体系列：monospace；
位置：相对位置；
宽度：100%；
高度：30px；
利润率：10px0；
背景色：#555；
填充：0；
背景图像：线性渐变（90度，红色，橙色，黄色，石灰色，绿色）；
边框：1px实心#000；
z指数：1；
}
.米>跨度{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景图像：线性渐变（-45度，rgba（255，255，255，.2）25%，透明25%，透明50%，rgba（255，255，255，.2）50%，rgba（255，255，255，.2）75%，透明75%，透明；
背景尺寸：50px 50px；
-webkit动画：移动2s线性无限；
动画：移动2s线性无限；
溢出：隐藏；
z指数：2；
}
.米>跨度>跨度{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
显示：块；
宽度：100%；
身高：100%；
z指数：3；
}
.meter>span>span>span{
显示：块；
宽度：计算（100%-2px）；
文本对齐：居中；
字体变体：小大写字母；
字体大小：粗体；
背景：线性梯度（向右，ff0000 0%，FF500 25%，ffff00 50%，00ff00 75%，008000 100%）；
背景剪辑：文本；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
-webkit文本笔划：1px#000；
}
/*动画*/
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：50px 50px；
}
}
@关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：50px 50px；
}
}
/*圆边*/
.米四舍五入，
.米圆形>跨度{
边界半径：25px；
}
.米圆trbl，
.米整圆trbl>span{