Question

我使用仪表元素标记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

我希望有一种更简单的方法，但我通过设置与米标签内的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，我会更喜欢只显示米标签的属性。

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

如何重置HTML5米标签

1 个答案: