HTML5 Progress Label How do I change the color of a progress bar? Progress progress Bar Detailed

This article describes the style resolution for the new Progress progress bar label in HTML5, explaining how to change the color of the progress bar by HTML5 the progress tag. Let's take a look at this article next.

First, let's get to know the HTML5 Progress label Introduction:

Progress is a new element of HTML5 that defines a progress bar, which can be used in the progress display of file uploads, the progress of file downloads, or as a loading loading status bar.

Tip: Use the <progress> tag with JavaScript to show the progress of your task.

Note:<progress> tags are not suitable for measuring weights (for example, disk space usage or query results). To represent weights and measures, use the <meter> tag instead.

HTML5 Progress progress bar Syntax:

<progress value= ' max= ' ></progress>

Let's prepare an example of a HTML5 progress tag:

Explanation, the progress is rendered in the Chrome browser in the following structure

Progress

:-webkit-progress-bar All Progress

:-webkit-progress-value has completed progress

The two pseudo-elements are added to the style.

However, in other browsers, such as IE10, these two pseudo-elements do not work, directly with the color style can modify the completed progress of the colors, and the overall progress is background

In Firefox, Progress-bar is the complete progress, background is the full progress, and opera in this style can only be the browser default style.

So the compatibility wording can be considered as follows:

progress{   color:orange;/* Compatible with IE10 completed progress background */   border:none;   Background: #d7d7d7;/* This property can also be used as Chrome's completed progress background, but is covered by the following::p Rogress-bar */      }progress::-webkit-progress-bar{   background: #d7d7d7;} progress::-webkit-progress-value,progress::-moz-progress-bar{     Background:orange;}
The above is the code about the color CSS style of the progress bar, which shows the following effects:


Well, the above is about the new HTML5 in the use of progress tags, change the color of the article, there are questions can be asked below.