如何调整HTML5< meter>标签 [英] How to style HTML5 <meter> tag

问题描述

我想知道如何设计新的< meter> 标签。

 code>< meter value = 80 min = 0 max = 100> 
 80/100 
< / meter> 
  

我只想更改背景颜色和颜色值，但我找不到正确的CSS属性。
对于基于webkit的浏览器，我发现了这些：

  meter ::  -  webkit-meter-horizo​​ntal-bar {
 -webkit-appearance：meter; 
 background：-webkit-gradient（linear，0％0％，0％100％，from（#DDD），color-stop（0.2，#EEE），color-stop（0.45，#CCC） - 停止（0.55，#CCC）到（#DDD））; 
} 
伪元素
 meter ::  -  webkit-meter-horizo​​ntal-optimum-value {
 -webkit-appearance：meter; 
 background：-webkit-gradient（linear，0％0％，0％100％，from（＃AD7），color-stop（0.2，#CEA），color-stop -stop（0.55，＃7A3）到（＃AD7））; 
} 
伪元素
 meter ::  -  webkit-meter-horizo​​ntal-suboptimal-value {
 -webkit-appearance：meter; 
 background：-webkit-gradient（线性，0％0％，0％100％，从（＃FE7）到（＃FE7），色彩停止（0.2，#FFC） ，＃DB3），颜色停止（0.55，＃DB3））; 
} 
伪元素
 meter ::  -  webkit-meter-horizo​​ntal-even-less-good-value {
 -webkit-appearance：meter; 
 background：-webkit-gradient（线性，0％0％，0％100％，从（＃F77）到（＃F77），色彩停止（0.2，#FCC） ，＃D44），色停（0.55，＃D44））; 
} 
伪元素
 meter ::  -  webkit-meter-vertical-bar {
 -webkit-appearance：meter; 
 background：-webkit-gradient（线性，0％0％，100％0％，从（#DDD）到（#DDD），色彩停止（0.2， ，#CCC），色停（0.55，#CCC））; 
} 
伪元素
 meter ::  -  webkit-meter-vertical-optimum-value {
 -webkit-appearance：meter; 
 background：-webkit-gradient（线性，0％0％，100％0％，从（＃AD7）到（＃AD7），色彩停止（0.2，#CEA） ，＃7A3），色停（0.55，＃7A3））; 
} 
伪元素
 meter ::  -  webkit-meter-vertical-suboptimal-value {
 -webkit-appearance：meter; 
 background：-webkit-gradient（线性，0％0％，100％0％，从（＃FE7）到（＃FE7），色彩停止（0.2，#FFC） ，＃DB3），颜色停止（0.55，＃DB3））; 
} 
伪元素
 meter ::  -  webkit-meter-vertical-even-less-good-value {
 -webkit-appearance：meter; 
 background：-webkit-gradient（线性，0％0％，100％0％，从（＃F77）到（＃F77），色彩停止（0.2，#FCC） ，＃D44），色停（0.55，＃D44））; 
} 
  

在哪里可以找到适合基于gecko的浏览器，Opera和IE？

解决方案

我使用以下代码在Webkit浏览器中使用了一个非常微妙的渐变： p>

  meter {-webkit-appearance：none; } // Crucial，这将禁用Webkit浏览器中的默认样式
 
 meter ::  -  webkit-meter-bar {
 background：#FFF; 
 border：1px solid #CCC; 
} 
 
 meter ::  -  webkit-meter-optimal-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，＃a1d4e6 0％，＃6bb4d1 100％）; 
 background：-o-linear-gradient（top，＃a1d4e6 0％，＃6bb4d1 100％）; 
 background：-ms-linear-gradient（top，＃a1d4e6 0％，＃6bb4d1 100％）; 
 background：linear-gradient（to bottom，＃a1d4e6 0％，＃6bb4d1 100％）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃a1d4e6'，endColorstr ='＃6bb4d1'，GradientType = 0）;但是，Chris Coyier在CSS-Tricks中的效果推荐以下HTML 代码：
  < div class =meter> 
< span style =width：25％>< / span> 
< / div> 
  
 ...而不是HTML5 < meter> 或< progress> 标记。在这个时间点（2013年2月），我同意他的意见：
 
 
更糟的是，不同浏览器的事情是非常不同的，甚至
在不同的WebKit浏览器之间。伪元素也不一致地工作
。我讨厌留下这样的东西，但这是
真的一个话题的另一个时间。只要说出来，对于这些
特定的进度条，div / span就是现在的票。
 
 
浏览器只是不太准备好接受< meter> 和< progress> 的新HTML5标准标签。 。有了这个说法，我建议人们超越的渴望直走未来，而是去看一些视觉效果，直到另行通知。我还应该提到，在当前时间点，这些标签的当前浏览器支持是在53％...这不值得对我来说，但我会留给你的项目的自由裁量权。
 
I am wondering how I could style the new <meter> tag.
<meter value=80 min=0 max=100>
  80/100
</meter>
I just want to change the background color and the value color, but I can't find the right CSS properties.
For webkit-based browsers I've found these:
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, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Where can I find the right CSS properties for gecko-based browsers (Firefox), Opera and IE?
解决方案
I got the meter styled with a nice subtle gradient in Webkit browsers using the following code:
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, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}
However, Chris Coyier over at CSS-Tricks recommends the following HTML code:
<div class="meter">
    <span style="width: 25%"></span>
</div>
... rather than the HTML5 <meter> or <progress> tags. At this point in time (February 2013), I agree with him:

  
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.
Browsers just don't really seem ready to accept the new HTML5 standard tags for <meter> and <progress>.  With that said, I'd suggest that people get over the desire to go straight for the future and rather go for something that works visually until further notice.  I should also mention that at the current point in time, the current browser support for these tags is at 53%... that's not worth it for me, but I'll leave that to your project's discretion.

                        
这篇关于如何调整HTML5&lt; meter&gt;标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！