如何重置

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，將簡單地顯示米標籤的屬性。

唯一的選擇似乎是：隱藏儀表標籤，並顯示在它旁邊的圖像..