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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (4)
  • 关注 (0)
  • 查看 (452)

我想知道我能如何设计新的<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));
}

在哪里可以找到适合壁虎浏览器(Firefox)、Opera和IE的CSS属性?

提问于
用户回答回答于

在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建议使用以下HTML代码:

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

而不是HTML 5<meter><progress>标签。我同意他的意见:

更糟糕的是,跨浏览器的情况有所不同,即使在不同的WebKit浏览器之间也是如此。 伪元素也工作不一致。 我不喜欢把事情这样挂,但这是另外一个话题。 可以这么说,对于这些特定的进度条,div / span是现在的票。

浏览器似乎没有准备好接受<meter><progress>的新HTML5标准标签。 有了这个说法,我建议人们克服直接面向未来的愿望,宁可选择直观的东西,直到进一步注意。 我还应该提及,在目前的时间点,目前浏览器对这些标签的支持率为53%......这对我来说并不值得,但我会将其留给您的项目决定。

用户回答回答于

按照MDN Meter,只有Chrome和Opera目前实现了仪表,FF有一个记录的bug,Safari在夜间使用。

用户回答回答于

仪表元素看起来就像在平台上其他地方使用的进度条。试着用它来替换仪表元素:

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

下面是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%);
}

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答
  • 富有想象力的人

    3 粉丝0 提问6 回答

扫码关注云+社区

领取腾讯云代金券