css - 进度条 chrome 的样式问题

Question

我有一个 html 程序，其中有一个进度元素。它在 Firefox 中变成蓝色，但拒绝在 Chrome 中工作，并且变成绿色，这是我不想要的。我的代码

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

你需要做两件事。首先将进度条的样式重置为其默认值，然后使用浏览器特定的伪类来定位外观，如下所示:

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

栏本身的样式是使用背景图像完成的:

 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%;
  }  

在这里阅读全文: https://css-tricks.com/html5-progress-element/