雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

progress设置颜色

2024-08-31 11

<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进度条的颜色和进度条的背景颜色。

更新于:19天前
赞一波!

文章评论

全部评论