β

自定义 HTML5 meter 元素样式

ITFeed 618 阅读

meter

HTML5种的meter元素非常有用,然而默认样式总是跟不上时代的步伐,所以琢磨了一下自定义样式的方式,仅适用于webkit内核的浏览器。Chrome 26 测试通过。分享给大家。颜色取自 Bootstrap Button

meter::-webkit-meter-bar {
  background: #FFF;
}
meter::-webkit-meter-optimum-value {
  background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
  background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
  background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}

测试地址 :http://shawphy.com/demo/meter.html

@simurai 写的更神奇的用法
@simurai 写的更神奇的用法

扩展阅读:
HTML5 progress元素的样式控制、兼容与实例

作者:ITFeed
互联网产品设计开发知名博客聚合
原文地址:自定义 HTML5 meter 元素样式, 感谢原作者分享。

发表评论