Question

我在html中有一个程序，它有一个progress元素。它在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;
}

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

阅读完整文章： https://css-tricks.com/html5-progress-element/

使用progressbar chrome的样式问题

1 个答案: