Question

希望有人能提供帮助，我正在使用HTML5电表标签，但是出于我想要的目的，它看起来很奇怪“最佳”属性的工作方式与低频时的红色相同，高时为绿色

它代表一个bin级别，因此当它高时我希望它在低时显示红色和绿色。

当分配给仪表标签时，是否有反转最佳属性的功能？

谢谢，威尔

Answer 1

目前尚不清楚您正在寻找什么，但我为您创建了以下内容，它是绿色的，直到它高于high值，此时它变为红色

/* HTML */
<meter min="0" low="" optimum="50" high="90" max="100" value="70"></meter>

/* CSS */
/* vv Crucial, this will disable the default styling */
meter { -webkit-appearance: none; -moz-appearance: none; appearance:none; } 

meter::-webkit-meter-bar { /* Color of background */
    background: #acacac;
}
meter::-webkit-meter-optimum-value { /* Color within low-high range */
    background: green;
}
meter::-webkit-meter-suboptimum-value { /* Color outside low-high range */
    background:red;
}

Demo（专为webkit制作）

如果你真的想要一个从绿色到红色的渐变，你可以使用像

这样的东西

background: -webkit-linear-gradient(left, lightgreen 0%, red 100%);
background: linear-gradient(to right, lightgreen 0%, red 100%);

米标签HTML 5的反向最佳属性

1 个答案: