Home  >  Article  >  Web Front-end  >  Customize the style of Progress in html

Customize the style of Progress in html

黄舟
黄舟Original
2017-07-08 14:10:041929browse

Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:

Customize the style of Progress in html

Customize the style of Progress in html

看起来貌似还不错,但是如果运行在 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 的样式。

示例:

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:

Customize the style of Progress in html

同时支持 CSS 动画、背景图片等特性哦,这样就可以根据自己的需要打造一个完全个性化的 Progress Bar 了。另外 Gecko 核心的浏览器也可以通过一个类似的伪元素 ::-moz-progress-bar 来实现同样的效果。IE 全系不支持此元素(这简直是一定的)。

The above is the detailed content of Customize the style of Progress in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn