html - 如何重置 HTML5 meter 标签

Question

我正在使用 meter 元素标记 0 到 5 之间的评级，但更愿意显示特定于其值的图像而不是默认的仪表样式:

<meter min="0" max="5" value="5">
    <img width="80" height="20" alt="5 out of 5 stars" src="stars_5.png">
</meter>

在 Firefox/Chrome/Safari 中使用带有供应商前缀的外观 none 似乎完全没有效果。

我是否必须求助于将图像放在它旁边并隐藏仪表，或者毕竟有可能吗？

Answer 1

我希望有一个更简单的方法，但我通过设置与 meter 标签内的 img 相同的背景图像来实现它

Firefox 重置(将外观重置为空白):

meter {
    background: none
}

::-moz-meter-bar {
  -moz-appearance: none
}

:-moz-meter-optimum::-moz-meter-bar,
:-moz-meter-sub-optimum::-moz-meter-bar,
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: none
}

Chrome/Opera/Safari 重置(将外观重置为空白):

meter {
    -webkit-appearance: none;
}

meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-webkit-meter-inner-element {
    background: none;
}

要用每个值的图像替换仪表的外观(幸好我只需要它从 0 到 5):

meter[value='5'] {
    background: url(stars_5.png)
}

meter[value='4'] ... etc

我更喜欢一个只显示仪表标签的属性，就好像它是一个 div 一样。

唯一的选择似乎是:隐藏仪表标签并在其旁边显示图像..