你好，
我正在学习 html 和 css。为了更好地理解进度条的工作原理，我创建了一个带有几个按钮和进度条的小型演示页面。
正如您在下面的 CSS 代码中看到的，我特别要求进度条的背景显示为红色。这在 Internet Explorer 上绝对有效。然而，在 Android 设备上，相同的进度条呈现为绿色？我是否需要假设无法为 android 定义进度条的背景颜色？还是我只是错过了什么？
感谢您的澄清和帮助。
我的 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>
我的 CSS 代码:
.test{
height:50px;
width:50px;
}
progress[value] {
/*border-radius: 2px; */
background-size: 35px 20px, 100% 100%, 100% 100%;
color:red;
}
最佳答案
您首先需要重置进度条样式:
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。更多信息请看here
关于html5 : why is my progressbar represented in green when I ask it to be in red?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41856135/