html - 具有反转值的仪表标签

Question

我想在容器变空时警告用户，所以我认为 meter 标签会很好。但只有当金额高于最高价且不低于最低价时，仪表标签才会改变颜色。当它变低时，我是否有机会告诉它改变颜色？

示例代码:

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

Answer 1

如果你想在 meter 元素上交换 high 和 low 的颜色 - 只需切换伪元素的背景 meter::-webkit-meter-even-less-good-value和 meter::-webkit-meter-optimum-value

FIDDLE

我到底从哪里得到这些属性的？

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

1) 在开发者工具中-点击设置:

2) 勾选:Show shadow DOM

2) 然后再次检查 DOM 和 viola，仪表的所有隐藏内部元素都显示出来并且可以进行调整:

标记

<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在 meter 元素上解释(除其他外)所有默认的 webkit 样式