如何重置

Question

我使用meter元素来标记0和5之间的评级，但宁愿显示特定其价值，而不是默认的仪表造型图像的HTML5仪表标签：

<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中使用外观无与供应商前缀似乎没有任何影响。

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

Answer 1

我希望有一个更简单的方法，但我得到了它通过设置相同的背景图片仪表标签内的IMG

火狐复位（复位外观空白）工作：

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 
} 

铬/歌剧/ 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; 
} 

为每个值的图像更换仪表的外观（还好我只需要它去˚F ROM 0至5）：

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

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

我宁愿因为它是如果一个div，将简单地显示米标签的属性。

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