自定义HTML5 Progress的样式的图文代码详解-H5教程-PHP中文网

自定义HTML5 Progress的样式的图文代码详解

黄舟

发布： 2017-04-01 11:50:49

原创

2477人浏览过

progress 元素是 html5 标准草案中新增的元素之一，w3c 关于此元素的定义请猛击这里。默认情况下，progress 会生成一个和系统默认样式一样的进度条。webkit 中对于 progress 的默认样式定义在这里可以找到。在 windows 7 和 maxos lion 中的显示效果如下：

自定义HTML5 Progress的样式的图文代码详解

看起来貌似还不错，但是如果运行在 Windows XP 下呢？想一下就够头疼了，何况出于一致性的考虑，很多情况下我们还是想能够控制这个进度条的样式。

查看了 Webkit 项目中关于 Element Progress 的定义，Progress 在渲染时会被解析成以下结构：

立即学习“前端免费学习笔记（深入）”；

<progress>
    ┗ <p> ::-webkit-progress-bar
         ┗ <p>::-webkit-progress-value

登录后复制

通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 两个伪元素选择符（之前伪元素的名称是 ::-webkit-progress-bar-value，今年上半年的某个 Patch 改成了现在这样，这里可以看到 Chromium 中一个相关的 Issue），可以定义第一层和第二层的两个 p 的样式。

智慧车行预约小程序

智慧车行小程序，是一个专门为洗车/4S/车辆维修行业打造的小程序，前后端完整代码包括车行动态，养车常识，保养预约，维修预约，洗车美容预约，汽车检测预约等功能。采用腾讯提供的小程序云开发解决方案，无须服务器和域名预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项预约凭证：支持线下到场后校验签到/核销/二维码自助签到等多种方式详尽的预约数据：支持预约名单数据导出Excel，打印

查看详情

示例：

progress {
    border-radius: 2px;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-top: 1px #aaa solid;
    background-color: #eee;
}
 
progress::-webkit-progress-bar {
    background-color: #d7d7d7;
}
 
progress::-webkit-progress-value {
    background-color: #aadd6a;
}

登录后复制

以上 CSS 可以定义一个如下效果的 Progress Bar：

自定义HTML5 Progress的样式的图文代码详解