logo标签列表

如何为HTML5的<meter>标签设置样式

htmlcssmeter
30

我想知道如何给新的<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, #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));
}

我应该在哪里找到适用于基于Gecko的浏览器（Firefox）、Opera和IE的正确CSS属性？

我尝试在FF和IE中呈现与Chrome相似的计量器标签。我已经应用了display:block; width:100%; height:1em;和许多渐变。它有效！但是，当我必须在计量器内创建另一个元素作为计量器值时...就变得棘手了。因此，我决定暂时使用这个。 - Simone
@simone：我认为如果你看一下我的更新答案，你可能会发现它更加详细... - cereallarceny
6个回答
17

这是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>

注意，Chrome中未填充（灰色）部分的表计是使用::-webkit-meter-bar样式化的，而Firefox则使用::-moz-meter-bar来填充（绿色、黄色、红色）部分，并在meter元素本身下样式未填充的部分。
此外，请注意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）。
这里是一个链接，解释了这些前缀伪元素的含义。 https://scottaohara.github.io/a11y_styled_form_controls/src/meter/
3
这对浏览器和HTML创建者来说是一个巨大的耻辱，因为这没有被标准化。 - allprog
14

我在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);
}

然而，CSS-Tricks的Chris Coyier 推荐使用以下HTML代码：

<div class="meter">
    <span style="width: 25%"></span>
</div>

在这个时期（2013年2月），我同意他的看法，对于这些特定的进度条，使用 div/span 标签是目前的选择，而不是 HTML5 中的 <meter> 或 <progress> 标签。更糟糕的是，在不同的浏览器之间，甚至在不同的 WebKit 浏览器之间，伪元素的工作方式也不一致。虽然我不想空口说白话，但这确实是另一个时间讨论的主题。

浏览器似乎还没有准备好接受新的 HTML5 标准标签 <meter> 和 <progress>。因此，我建议人们放弃追求未来，先选择一些视觉上运行正常的东西，直到有更好的方案出现。此外，当前这些标签的浏览器支持率只有53%......对我来说不值得冒险，但让您自己权衡利弊吧。

1
是的...不幸的是，已经过去了将近一年时间，我们只看到了约1%的增长。 - cereallarceny
不过，我们想知道怎么才能让它更快地成长。 - icedwater
1
我们无法控制，这取决于各种浏览器的创建者。 - cereallarceny
2
在 WebKit 特定的伪元素选择器后面包含所有跨浏览器渐变效果是愚蠢的，因为 Mozilla 和 IE 永远不会解析它。 - Hugh Guiney
3
这个回答已经过时了。当前浏览器的支持情况很好（仅IE-11缺乏支持）。有一种方法可以跨浏览器对这个元素进行样式设置，但这个回答只给出了针对Webkit衍生浏览器的答案。 - Rúnar Berg
显示剩余3条评论
5
以下是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%);
}

where to find Mozilla CSS properties

4

在你所在的平台中，Meter元素看起来像其他地方使用的进度条。 尝试使用以下内容替换Meter元素：

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>
7
三个元素的价格，却只有一个？太坑了！ - Madara's Ghost
你说得对，这不是一个真正的答案，因为实际上并不存在。也许下面这些链接可以帮助你理解： http://www.w3schools.com/html5/tag_meter.asp http://www.w3schools.com/html5/tag_progress.asp-ms- 微软 mso- 微软 Office -moz- Mozilla 基金会（Gecko 内核浏览器） -o- Opera Software -atsc- 高级电视标准委员会 -wap- WAP 论坛 -webkit- Safari、Chrome（以及其他基于 WebKit 的浏览器） -khtml- Konqueror 浏览器 - badfur
由于许多浏览器不支持受输入影响的计量表标签，并且IE11根本不支持计量表标签，因此这个答案并不是一个坏答案。 - Tom
4

对于想要非平凡外观的人来说，在2021年，通过创造性地使用 background-image 属性及其相关搭档，可以轻松实现任何类型的仪表。

Firefox和Chrome之间唯一的区别是 background: none;。

Safari需要 -webkit-appearance: none，而Chrome需要 -webkit-appearance: meter ，因此它们不兼容。这个问题的解决方法超出了本答案的范围。

.scaffolding {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 8px;
}
label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 0;
}

meter,
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;
    border-radius: 0;
    border: none;
    width: 100%;
    height: 4rem;
}

meter { 
    appearance: none;
    -moz-appearance: meter;
    -webkit-appearance: meter;
    width: 20rem; //very important

}

meter::-webkit-meter-optimum-value { 
    background-image: repeating-linear-gradient(to right,
     transparent 0rem, transparent 0.25rem, 
     green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
     green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
     green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
     green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
    repeating-linear-gradient(to right, 
    transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
    background-size: 2.5rem 3rem, 2.5rem 4rem;
    background-position-y: center, center;
    background-repeat: repeat-x, repeat-x;
}
meter::-moz-meter-bar { 
    background: none;
    background-image: repeating-linear-gradient(to right,
     transparent 0rem, transparent 0.25rem, 
     green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
     green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
     green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
     green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
    repeating-linear-gradient(to right, 
    transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
    background-size: 2.5rem 3rem, 2.5rem 4rem;
    background-position-y: center, center;
    background-repeat: repeat-x, repeat-x;
}
<div class="scaffolding">
  <label>40</label>
  <meter min="0" max="40" value="40"></meter>
  <label>20</label>
  <meter min="0" max="40" value="20"></meter>
  <label>15</label>
  <meter min="0" max="40" value="15"></meter>
  <label>35</label>
  <meter min="0" max="40" value="35"></meter>
  <label>4</label>
  <meter min="0" max="40" value="4"></meter>
</div>

0
您可以使用类似以下内容的 css 来设置进度条的大小和位置：
meter {
    margin: 0 auto 4.5em;
    width: 450px;
    height: 50px;
    display: block;
}

关于颜色，您需要使用适合您的浏览器的 WebKit。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接