使用progressbar chrome的样式问题

Question

I have a program in html that has a progress element. It turns blue in firefox, but refuses to work in chrome, and it turns green, which I don't want. my code

progress {
  color: #0063a6;
  font-size: .6em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 30em;
  height: 3em;
  border: 1px solid #0063a6;
  background: #fff;
}

<progress value ="50" max ="100"></progress>

Answer 1

You need to do two things. First reset the style of the progressbar to it's default values and then target the appearance with a browser specific pseudo class like so:

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

progress::-webkit-progress-bar {
     background-color: #eee;
     border-radius: 2px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

styling the bar itself is done using background-image:

 progress[value]::-webkit-progress-value {
    background-image:
         -webkit-linear-gradient(-45deg, 
                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
                           rgba(0,0, 0, .1) 66%, transparent 66%),
         -webkit-linear-gradient(top, 
                           rgba(255, 255, 255, .25), 
                           rgba(0, 0, 0, .25)),
         -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
  }  

Read the full article here: https://css-tricks.com/html5-progress-element/