ptg16476052356 LESSON 12: Designing Forms
Figure 12.26 shows how this would look in Chrome. But be sure to test in Safari and
Firefox as well.Output ▼
Here is the full listing for the page shown in Figure 12.26:Input ▼
<!doctype html>
<html>
<head>
<title>Styled Progress Bar</title>
<style>
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* 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 {FIGURE 12.26
Styling the prog-
ress bars.