我想知道如何将新的< meter>标签。
<meter value=80 min=0 max=100> 80/100 </meter>
我只想改变背景颜色和值颜色，但是我找不到正确的CSS属性。
对于基于webkit的浏览器，我发现这些：
meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear,0% 0%,0% 100%,from(#DDD),color-stop(0.2,#EEE),color-stop(0.45,#CCC),color-stop(0.55,to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear,from(#AD7),#CEA),#7A3),to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear,from(#FE7),to(#FE7),#FFC),#DB3),#DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear,from(#F77),to(#F77),#FCC),#D44),#D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear,100% 0%,to(#DDD),#CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear,to(#AD7),#7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear,#DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear,#D44));
}
在哪里可以找到适合基于壁虎的浏览器(Firefox)，Opera和IE的CSS属性？
解决方法
我使用以下代码在Webkit浏览器中使用了微妙的渐变样式：
meter { -webkit-appearance: none; } //Crucial,this will disable the default styling in Webkit browsers
meter::-webkit-meter-bar {
background: #FFF;
border: 1px solid #CCC;
}
meter::-webkit-meter-optimum-value {
background: #87C7DE;
background: -moz-linear-gradient(top,#a1d4e6 0%,#6bb4d1 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#a1d4e6),color-stop(100%,#6bb4d1));
background: -webkit-linear-gradient(top,#6bb4d1 100%);
background: -o-linear-gradient(top,#6bb4d1 100%);
background: -ms-linear-gradient(top,#6bb4d1 100%);
background: linear-gradient(to bottom,#6bb4d1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6',endColorstr='#6bb4d1',GradientType=0);
}
不过，Chris Coyier在css-Tricks recommends the following HTML代码：
<div class="meter">
<span style="width: 25%"></span>
</div>
…而不是HTML5< meter>或< progress>标签。在这个时候(2013年2月)，我同意他的观点：
To make things worse,things are very different across browsers,even
between different WebKit browsers. Pseudo elements also work
inconsistently. I hate to leave things hanging like this,but this is
really a topic for another time. Suffice it to say,for these
particular progress bars,the div/span thing is the ticket for Now.
浏览器似乎没有准备好接受< meter>的新HTML5标准标签。和< progress> ;.就这样说，我建议人们越过对未来的直接愿望，而不是直接进行直观的工作，直到另行通知。我还应该提到，在目前这个时候，这些标签的current browser support是53％…这对我来说是不值得的，但是我会把它留给你的项目自由裁量权。