更改进度条的颜色
可以使用 progress[value]
选择器设置进度条的样式。
此示例给出了一个进度条,其宽度为 250px
,高度为 20px
progress[value] {
width: 250px;
height: 20px;
}
进度条可能特别难以定型。
Chrome / Safari / Opera
这些浏览器使用 -webkit-appearance
选择器设置进度标记的样式。要覆盖它,我们可以重置外观。
progress[value] {
-webkit-appearance: none;
appearance: none;
}
现在,我们可以为容器本身设置样式
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox 对进度条的设置略有不同。我们必须使用这些样式
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
IE 浏览器
Internet Explorer 10+支持 progress
元素。但是,它不支持 background-color
属性。你需要使用 color 属性。
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}