<meter> 有3种颜色

Question

我想实现一个用作 VU 表的表。目前我有这个：

<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>

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

Answer 2

我理解这个问题的方式，条形图应显示为两部分（阈值以下的黄色和阈值以上的红色），第三种颜色表示测量值顶部上方未使用的区域？

似乎应该有一个简单的方法来做到这一点，目前我能想到的就是通过用普通条显示到阈值来伪造它，然后添加任意宽度的红色右边框......