| <html> |
| <head><script> |
| window.onload = function() { |
| document.getElementById("removingAppearanceDynamically").setAttribute("style", "-webkit-appearance: none;"); |
| document.getElementById("givingProgressStyleDynamically").setAttribute("style", "background-color: lightblue;"); |
| } |
| </script> |
| <style> |
| .styled { -webkit-appearance: none; } |
| .transparent-bar::-webkit-progress-bar { background-color: transparent; } |
| .transparent-value::-webkit-progress-value { background-color: transparent; } |
| .progress-style { border:3px solid #006; background-color: blue; } |
| .bar-style::-webkit-progress-bar { background-color: red; border:3px solid #900; } |
| .value-style::-webkit-progress-value { background-color: yellow; border:3px solid #990; } |
| </style> |
| </head> |
| <body> |
| <ul> |
| <li>Default style: <progress value=0.1 style="-webkit-appearance: none;" ></li> |
| <li>Progress style: <progress class="styled transparent-bar progress-style" value=0.2> |
| <li>Progress style (size): <progress class="styled" style="width: 300px; height: 30px;" value=0.3> |
| <li>Bar style: <progress class="styled bar-style" value=0.4> |
| <li>Value style: <progress class="styled value-style" value=0.5> |
| <li>Styling for all three elements: <progress class="styled progress-style bar-style value-style" style="height:30px" value=0.6> |
| <li>Removing appearance dynamically: <progress id="removingAppearanceDynamically" value=0.7> |
| <li>Giving progress style change dynamically: <progress id="givingProgressStyleDynamically" class="styled transparent-bar" value=0.8> |
| </ul> |
| </body> |
| </html> |
