progress设置颜色
2024-08-31
67
<progress>标签是 HTML5 中用来表示进度条的元素,它通常用于显示任务的进度或者表单提交的进度。今天需要修改一个progress的样式,在谷歌浏览器的Element>Styles工具里找不到它的颜色的css样式。
查了一下文档应该这样改:
/* background: */
progress::-webkit-progress-bar {background-color: black; width: 100%;}
progress {background-color: black;}
/* value: */
progress::-webkit-progress-value {background-color: green !important;}
progress::-moz-progress-bar {background-color: green !important;}
progress {color: green;}
progress的css样式针对firefox的是progress::-moz-progress-bar,谷歌或者Safari是progress::-webkit-progress-value,IE10是progress { color: blue; }。
这样能兼容所有浏览器,可以修改progress进度条的颜色和进度条的背景颜色。
更新于:4个月前赞一波!3
文章评论
评论问答