Question

我的进度条出了问题.. 在chrome中，进度条的值是红色的..我用CSS做了... 但是在Mozilla中，进度条的价值只是有点灰色..

    progress[value] {
  width: 250px;
  height: 10px;

}
progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;

  width: 250px;
  height: 24px;
}
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
    background-color: #eee;
    border-radius: 5px;
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-value {
    background-color:#ff0000;
    -moz-border-radius: 5px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
    opacity:0.6;
}
progress[value]::-webkit-progress-value {
    background:red;
    border-radius: 5px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
    opacity:0.6;
}

进度条的-moz-值必须为红色，提前谢谢！

Answer 1

来自css-tricks的参考：

“Firefox提供了一个伪类（-moz-progress-bar），我们可以使用它来定位进度条值。这意味着我们无法在Firefox中设置容器的背景样式。”

如上所述，-moz-progress-bar指的是价值本身，因此将其设为红色应该使价值符合您的要求。 -moz-progress-value不存在。

Mozilla进步风格

1 个答案: