Summary of CSS styles for the progress tag in html5

In HTML5, a new progress tag is added, which is used to represent the progress bar.

<progress value="100" max="100" class="hot">

The display effect is as follows:

The CSS style code is as follows:

progress{
        width: 168px;
    height: 5px;
        
}progress::-webkit-progress-bar{
       background-color:#d7d7d7;
}progress::-webkit-progress-value{
     background-color:orange;
}

Explain below , in the Chrome browser

progress is rendered with the following structure

progress

↓

::-webkit-progress-bar All progress

↓

::-webkit-progress-value Completed progress

Add styles to it through these two pseudo-elements.

But it is different in other browsers, such as IE10. These two pseudo-elements do not work. You can directly use the color style to modify the color of the completed progress, and the entire progress is background

In FireFox, the progress-bar represents the completed progress, and the background represents the entire progress. However, in Opera, this style can only be the browser default style.

So the compatibility writing method can be considered as follows

progress{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
   }progress::-webkit-progress-bar{
   background:#d7d7d7;
}progress::-webkit-progress-value,
progress::-moz-progress-bar{
     background:orange;
}

The above is the detailed content of Summary of CSS styles for the progress tag in html5. For more information, please follow other related articles on the PHP Chinese website!