html5：为什么当我要求progressbar用红色表示时，它用绿色表示？_Html_Css_Progress Bar

html5：为什么当我要求progressbar用红色表示时，它用绿色表示？

html css

html5：为什么当我要求progressbar用红色表示时，它用绿色表示？,html,css,progress-bar,Html,Css,Progress Bar,你好我正在学习html和css。为了更好地理解progressbar的工作原理，我创建了一个带有几个按钮和progressbar的小演示页面正如您在下面的CSS代码中所看到的，我特别要求progressbar的背景以红色显示。这在InternetExplorer上运行得非常好。但是，在android设备上，相同的progressbar呈现为绿色？我是否需要假设无法为android定义progressbar的背景色？还是我只是错过了什么感谢您的澄清和帮助我的html代码： <!DOC

你好

我正在学习html和css。为了更好地理解progressbar的工作原理，我创建了一个带有几个按钮和progressbar的小演示页面

正如您在下面的CSS代码中所看到的，我特别要求progressbar的背景以红色显示。这在InternetExplorer上运行得非常好。但是，在android设备上，相同的progressbar呈现为绿色？我是否需要假设无法为android定义progressbar的背景色？还是我只是错过了什么

感谢您的澄清和帮助

我的html代码：

<!DOCTYPE html>
<html>
<head>
  <title>Progress example   </title>
  <link rel="stylesheet" type="text/css" href="test_progress.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>
<body>
  <p>Avancement de la tâche à effectuer :
  <progress id="avancement" value="50" max="100"></progress>
  <span id="pourcentage"></span>
  <input type="button" class="test" onclick="modif(-10);" value="-">
  <input type="button" class="test" onclick="modif(10);" value="+">
  <input type="button" class="test" onclick="modif(10);" value="UP">
  </p>
  <script>
  function avancement() {
  var ava = document.getElementById("avancement");
  var prc = document.getElementById("pourcentage");
  prc.innerHTML = ava.value + "%";
  }

  function modif(val) {
  var ava = document.getElementById("avancement");
  if((ava.value+val)<=ava.max && (ava.value+val)>0) {
  ava.value += val;
  }
  avancement();
  }

  avancement(); //Initialisation
  </script>
</body>
</html>

试试这个：

progress::-webkit-progress-value {
  background-color: red;
}

但是保留你以前的声明

progress[value] {
  color: red
}

由于IE需要，您首先需要重置进度条样式：

progress[value] {
   /* Reset the default appearance */
   -moz-appearance: none;
   appearance: none;

   /* leave defaults in for other browsers */
   background-size: 35px 20px, 100% 100%, 100% 100%;
   color:red; 
}

现在它被重置了，您需要设置元素的设置方式

progress[value]::-webkit-progress-bar {
   /*border-radius: 2px; */
   background-size: 35px 20px, 100% 100%, 100% 100%;
   color:red; 
}

这应该可以为您遇到问题的chrome做到这一点。请参阅更多深入信息

使用以下CSS：

progress[value]::-webkit-progress-value {
    background-color: red;
}

.test{
高度：50px；
宽度：50px；
}
进展[价值]{
/*边界半径：2px*/
背景尺寸：35px 20px，100%100%，100%100%；
颜色：红色；
}
进度[值]：-webkit进度值{
背景色：红色；
}

Avancement de la t–cheáeffectuer:

将此添加到CSS中：

progress[value]::-webkit-progress-value{background-color:red}

非常感谢你的解释。这是我第一次回答这个问题。有趣的是，当我刷新时，已经有3个答案了。

progress[value]::-webkit-progress-value{background-color:red}