How to change progress bar color in html
By Tan Lee Published on Mar 14, 2024 428
To change the color of a progress bar in HTML, you can use CSS.
The progress bar is an HTML5 element, and you can style it using CSS properties like background-color or color.
I will create a css file with named site.css, then include the css to html file
/* Style the progress bar */
progress {
width: 200px; /* Adjust width as needed */
height: 20px; /* Adjust height as needed */
border: none;
background-color: lightgray; /* Default background color */
}
/* Change the color of the progress bar */
progress::-webkit-progress-bar {
background-color: lightgray; /* Default background color */
}
progress::-webkit-progress-value {
background-color: green; /* Change to desired color */
}
progress::-moz-progress-bar {
background-color: green; /* Change to desired color */
}Next, create a simple html file as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Color</title>
<link rel="stylesheet" href="/css/site.css" type="text/css" />
</head>
<body>
<h2>Progress Bar Color Example</h2>
<progress value="50" max="100"></progress>
</body>
</html>In this example:
- The
progresselement defines the progress bar. - The
valueattribute sets the current progress value. - The
maxattribute sets the maximum value of the progress bar. - CSS selectors like
::-webkit-progress-bar,::-webkit-progress-value, and::-moz-progress-barare used to target different parts of the progress bar and apply styling. - Adjust the
background-colorproperty within these selectors to change the color of the progress bar and its fill.
Remember to adjust the width, height, and other properties to match your design requirements. Additionally, different browsers may require different prefixes for CSS selectors (e.g., -webkit-, -moz-) for cross-browser compatibility.
Categories
Popular Posts
RuangAdmin Template
Nov 13, 2024
11 Things You Didn't Know About Cloudflare
Dec 19, 2024
AdminKit Bootstrap 5 HTML5 UI Kits Template
Nov 17, 2024
Modular Admin Template
Nov 14, 2024