Question

我想知道如何设置新<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属性？

Answer 1

我使用以下代码在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);
}

然而，Chris Coyier在CSS-Tricks recommends the following HTML代码：

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

...而非HTML5 <meter>或<progress>标记。在这个时间点（2013年2月），我同意他的意见：

更糟糕的是，即使是浏览器，情况也各不相同不同的WebKit浏览器之间。伪元素也有效不一致。我不想把这样的事情挂起来，但这是真的是另一个时间的主题。我只想说，对于这些特别的进度条，div / span是现在的票。

浏览器似乎并不准备接受<meter>和<progress>的新HTML5标准代码。话虽如此，我建议人们克服为未来直奔的愿望，而是寻求视觉上有效的东西，直到另行通知为止。我还要提一下，在目前的时间点，这些标签的current browser support为53％......这对我来说不值得，但我会将其留给您的项目自行决定。

Answer 2

Meter元素看起来像您所在平台上其他地方使用的进度条。试试这个来替换仪表元素：

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>

Answer 3

以下是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

Answer 4

您可以使用css中的以下内容设置仪表尺寸和位置的样式：

meter {
    margin: 0 auto 4.5em;
    width: 450px;
    height: 50px;
    display: block;
}

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

Answer 5

对于在 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>

Answer 6

这是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）。 / p>

这里是一个链接，解释这些前缀的伪元素的含义。 https://scottaohara.github.io/a11y_styled_form_controls/src/meter/

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

6 个答案: