29

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

4

6 回答 6

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>

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

更糟糕的是，浏览器之间的情况非常不同，甚至在不同的 WebKit 浏览器之间也是如此。伪元素的工作方式也不一致。我讨厌让事情像这样悬而未决，但这确实是另一个话题。可以这么说，对于这些特定的进度条，div/span 是目前的门票。

浏览器似乎并没有真正准备好接受新的 HTML5 标准标签<meter>和<progress>. 话虽如此，我建议人们克服直奔未来的愿望，而是选择视觉上有效的东西，直到另行通知。我还应该提到，在当前时间点，当前浏览器对这些标签的支持率为 53%……这对我来说不值得，但我会让你的项目自行决定。

于 2013-02-04T00:54:39.790 回答
14

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

请注意，仪表的未填充（灰色）部分::-webkit-meter-bar使用 Chrome 中的样式设置，而 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/

于 2019-05-15T18:24:46.107 回答
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%);
}

在哪里可以找到 Mozilla CSS 属性

于 2013-06-18T22:14:34.523 回答
4

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

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>
于 2011-11-13T12:35:10.793 回答
2

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

于 2021-02-08T07:07:31.263 回答
0

您可以在 css 中使用类似以下内容来设置仪表大小和位置的样式：

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

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

于 2018-06-14T12:19:00.480 回答