HTML5 中的meter 标签的样式设置

Posted 2020-06-14

meter {

-webkit-appearance: none;

position: relative;

display: block;

margin: 8px auto;

width: 100px;

height: 17px;

border-radius: 5px;

padding: 4px 5px 4px 5px;

box-sizing: border-box;

background: #000;

-webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08);

-webkit-transform-origin: center 8px;

}

meter::-webkit-meter-bar {

background-color: hsl(200,10%,14%);

background-size: 2px 5px;

background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),

-webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );

}

 

 

meter::-webkit-meter-optimum-value,

meter::-webkit-meter-suboptimum-value,

meter::-webkit-meter-even-less-good-value {

background-size: inherit;

background-image: inherit;

-webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);

-webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);

}

 

meter::-webkit-meter-optimum-value { background-color: hsl(200,100%,50%); }

meter::-webkit-meter-suboptimum-value { background-color: hsl(200,100%,50%); }

meter::-webkit-meter-even-less-good-value { background-color: hsl(200,100%,50%); }

meter:hover::-webkit-meter-optimum-value,

meter:hover::-webkit-meter-suboptimum-value,

meter:hover::-webkit-meter-even-less-good-value {

 

width: 100% !important;

-webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);

}