自定义 HTML5 meter 元素样式

来源:转载

本文章给大家介绍自定义 HTML5 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);

}

@simurai 写的更神奇的用法



分享给朋友:
您可能感兴趣的文章:
随机阅读: