Posted By
Bajarangi soft ,
Posted On 13-10-2020
Example 1: In this example, we will set the color of progress bar.
<!DOCTYPE html>
<html>
<head>
<title>
How to Set Background Color of
Progress Bar using HTML and CSS?
</title>
<style>
/* For Firefox */
progress::-moz-progress-bar {
background: green;
}
/* For Chrome or Safari */
progress::-webkit-progress-value {
background: green;
}
/* For IE10 */
progress {
background: green;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Set Background Color of Progress
Bar using HTML and CSS
</h4>
<progress value="40" max="100"></progress>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
How to Set Background Color of
Progress Bar using HTML and CSS?
</title>
<style>
/* For Chrome or Safari */
progress::-webkit-progress-bar {
background-color: #e82020;
}
progress::-webkit-progress-value {
background-color: #fc3e26 !important;
}
/* For Firefox */
progress {
background-color: #eee;
}
progress::-moz-progress-bar {
background-color: #962d03 !important;
}
/* For IE10 */
progress {
background-color: #eee;
}
progress {
background-color: #f62922;
}
</style>
</head>
<body>
<h1 style="color:#b14d18;">
BAJARANGI SOFT
</h1>
<h4>
Set Background Color of Progress
Bar using HTML and CSS?
</h4>
<progress value="40" max="100"></progress>
</body>
</html>