Html 如何设置 HTML5 <meter> 标签的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8094835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style HTML5 <meter> tag
提问by Simone
I am wondering how I could style the new <meter>tag.
我想知道如何设计新<meter>标签的样式。
<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:
我只想更改背景颜色和值颜色，但找不到正确的 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, #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?
在哪里可以找到适用于基于壁虎的浏览器 (Firefox)、Opera 和 IE 的正确 CSS 属性？
采纳答案by cereallarceny
I got the meter styled with a nice subtle gradient in Webkit browsers using the following code:
我使用以下代码在 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, #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 HTMLcode:
但是，CSS-Tricks 的 Chris Coyier推荐以下 HTML代码：
<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:
... 而不是 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.
更糟糕的是，浏览器之间的情况非常不同，甚至不同的 WebKit 浏览器之间也是如此。伪元素的工作也不一致。我讨厌让事情像这样悬而未决，但这确实是另一个话题。我只想说，对于这些特定的进度条，div/span 是现在的票。
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 supportfor these tags is at 53%... that's not worth it for me, but I'll leave that to your project's discretion.
浏览器似乎还没有真正准备好接受新的 HTML5 标准标签<meter>和<progress>。话虽如此，我建议人们克服直奔未来的愿望，而宁愿选择视觉上有效的东西，直到另行通知。我还应该提到，在当前时间点，当前浏览器对这些标签的支持率为 53%……这对我来说不值得，但我会让你的项目自行决定。
回答by Rezen
Below are the rules for FireFox. I included a screenshot on where to find the rules in the Firefox inspector.
以下是 FireFox 的规则。我在 Firefox 检查器中包含了一个关于在哪里可以找到规则的屏幕截图。
::-moz-meter-bar {
/* Block styles that would change the type of frame we construct. */
display: inline-block ! important;
float: none ! important;
position: static ! important;
overflow: visible ! important;
-moz-appearance: meterchunk;
height: 100%;
width: 100%;
}
:-moz-meter-optimum::-moz-meter-bar {
/* green. */
background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
/* orange. */
background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
/* red. */
background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
回答by badfur
Meter elements look like progress bars used elsewhere on the platform you are on. try this to replace the meter elements:
仪表元素看起来像您所在平台上其他地方使用的进度条。试试这个来替换仪表元素：
<div style="padding:2px;background:#CCC;">
<div style="width:25%;background:#F00;text-align:center;">
<span>25%</span>
</div>
</div>
回答by Rúnar Berg
Here is a cross browser solution in 2019:
这是2019年的跨浏览器解决方案：
meter {
--background: #dadada;
--optimum: forestgreen;
--sub-optimum: gold;
--sub-sub-optimum: crimson;
/* The gray background in Firefox */
background: var(--background);
display: block;
margin-bottom: 1em;
width: 100%;
}
/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
background: var(--background);
}
/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--optimum);
}
/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
background: var(--optimum);
}
/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--sub-optimum);
}
/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
background: var(--sub-optimum);
}
/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--sub-sub-optimum);
}
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
background: var(--sub-sub-optimum);
}<label>
Optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=80>
80/100
</meter>
</label>
<label>
Sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=50>
80/100
</meter>
</label>
<label>
Sub-sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=20>
80/100
</meter>
</label>Note that the unfilled (grey) portion of the meter is styled with the ::-webkit-meter-barin Chrome, while firefox uses ::-moz-meter-barfor the filled (green, yellow, red) part and styles the unfilled part with under the meterelement it self.
请注意，仪表的未填充（灰色）部分::-webkit-meter-bar使用 Chrome 中的样式，而 firefox::-moz-meter-bar用于填充（绿色、黄色、红色）部分，并将未填充部分的样式设置在meter它自己的元素下方。
Also note that firefox has pseudo selectors on the meterelement to differentiate between optimal and sub-optimal values (:-moz-optimal, :-moz-sub-optimal, and :-moz-sub-sub-optimal; then you simply style the ::-moz-meter-barpseudo child of the appropriate pseudo selector) while Chrome allows you to style different pseudo elements for that purpose (::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, and ::-webkit-meter-even-less-good-valuerespectively).
另请注意，firefox 在meter元素上具有伪选择器以区分最佳和次优值（:-moz-optimal、:-moz-sub-optimal和:-moz-sub-sub-optimal; 然后您只需::-moz-meter-bar设置适当伪选择器的伪子元素的样式），而 Chrome 允许您为此目的设置不同伪元素的样式（::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, 和::-webkit-meter-even-less-good-value)。
Here is a link that explains what these prefixed pseudo elements mean. https://scottaohara.github.io/a11y_styled_form_controls/src/meter/
这是一个链接，解释了这些带前缀的伪元素的含义。 https://scottaohara.github.io/a11y_styled_form_controls/src/meter/
回答by Steve Ward
You can style the meter size and position using something like the following in your css:
你可以在你的 css 中使用类似下面的东西来设置仪表大小和位置的样式：
meter {
margin: 0 auto 4.5em;
width: 450px;
height: 50px;
display: block;
}
For colours, you need to use a webkit appropriate to your browser.
对于颜色，您需要使用适合您浏览器的 webkit。
