带有反转值的仪表标签

Question

我想警告用户，如果容器变空，我认为meter标签会很好。但是，只有当数量高于高而不低于低时，米标签才会改变颜色。当它变低时我有没有机会告诉它改变颜色？

示例代码：

<p>He got a <meter low="69" high="80" max="100" value="89">B</meter> on the exam.</p>

Answer 1

如果要在仪表元素上交换高低颜色 - 只需切换伪元素meter::-webkit-meter-even-less-good-value和meter::-webkit-meter-optimum-value

的背景

<强> FIDDLE

我到底在哪里获得这些属性？

好吧，首先您需要编辑浏览器设置以显示Shadow DOM。

1）在开发者工具中 - 点击设置：

2）选中框：显示阴影DOM

2）然后再次检查DOM和中提琴，显示仪表的所有隐藏的内部元素并且可以进行调整：

标记

<p>He got a <meter low="69" high="80" max="100" value="25">F</meter> on the exam.</p>

<p>He got a <meter low="69" high="80" max="100" value="76">C</meter> on the exam.</p>

<p>He got a <meter low="69" high="80" max="100" value="91">A</meter> on the exam.</p>

CSS

meter::-webkit-meter-even-less-good-value {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(170, 221, 119)), color-stop(0.2, rgb(204, 238, 170)), color-stop(0.45, rgb(119, 170, 51)), color-stop(0.55, rgb(119, 170, 51)), to(rgb(170, 221, 119)));

}

meter::-webkit-meter-optimum-value {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 119, 119)), color-stop(0.2, rgb(255, 204, 204)), color-stop(0.45, rgb(221, 68, 68)), color-stop(0.55, rgb(221, 68, 68)), to(rgb(255, 119, 119)));

}

修改

我刚注意到米元素上有一个css-tricks article，它解释了（除其他事项外）所有默认的webkit样式