Question

我想实现一台用作VU表的仪表。在这个momement我有这个：

<meter id="sr_volume_meter" value="0" min="0" optimum="30" max="65" low="15" high="45" style="width:100px; height:20px;"></meter>

但是，在Chrome中（至少），此显示黄色低于min，黄色低于max。如果值高于max，我想显示红色。我该如何实现呢？

Answer 1

如果你想做的就是用红色替换“次优”黄色，这样的东西对Mozilla和Chrome都有效。

meter {
    width:100px; height:20px;
}

:-moz-meter-sub-optimum::-moz-meter-bar {
    background-image: linear-gradient(rgb(230, 100, 100), rgb(230, 100, 100), rgb(238, 108, 108) 20%, rgb(204, 74, 74) 45%, rgb(204, 74, 74) 55%);
}
::-webkit-meter-suboptimum-value {
    background-image: linear-gradient(rgb(230, 100, 100), rgb(230, 100, 100), rgb(238, 108, 108) 20%, rgb(204, 74, 74) 45%, rgb(204, 74, 74) 55%);
}

<p><meter min="0" low="15" optimum="30" high="45" max="65" value="0"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="10"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="20"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="30"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="40"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="50"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="60"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="70"></meter></p>

或者你的意思是你想要一个双色条，“高”标记下面的部分为绿色，上面是否为红色？

<米>有3种颜色

1 个答案: