<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>
