Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Displaying Updates with progress and meter 355

12

Different browsers style the progress bar in different ways. And even if you like the thin,
rounded, blue bars that most browsers use, it might clash with your design. So, it is pos-
sible to adjust how the progress bar looks using pseudo-classes. As of this writing, there
isn’t a consensus as to how to style them, so you have to do a couple of extra steps to
make sure that your progress bar looks as you expect it to.

In Safari and Chrome, the -webkit-progress-bar pseudo-class changes the progress
tag, and the -webkit-progress-value changes the value—in other words, the bar inside
that tracks the progress. Firefox does it slightly differently. To style the progress tag,
you select that tag as you normally would. And to style the value, you style the
-moz-progress-bar pseudo-class. Before you can do any of that, though, you need to
remove the default styles by changing the appearance:

Input ▼

progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Then you can adjust how the progress bar looks using the pseudo-classes:

/ Chrome and Safari /
progress::-webkit-progress-bar {
height: 10px;
background: #dfdfdf;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 5px;
}
progress {
height: 10px;
background: #dfdfdf;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 5px;
}
/ Mozilla Firefox /
progress::-webkit-progress-value {
background-color: #026105;
border-radius: 5px;
}
progress::-moz-progress-bar {
background-color: #026105;
border-radius: 5px;
}