自定义html中Progress的样式
程序员文章站
2022-05-05 08:33:46
...
Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:
看起来貌似还不错,但是如果运行在 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:
同时支持 CSS 动画、背景图片等特性哦,这样就可以根据自己的需要打造一个完全个性化的 Progress Bar 了。另外 Gecko 核心的浏览器也可以通过一个类似的伪元素 ::-moz-progress-bar 来实现同样的效果。IE 全系不支持此元素(这简直是一定的)。
以上就是自定义html中Progress的样式的详细内容,更多请关注其它相关文章!
上一篇: js选项卡的实现方法
下一篇: Python 五点搞定作用域
推荐阅读
-
iOS多线程应用开发中自定义NSOperation类的实例解析
-
DataGridView中在新增行时怎样设置每个Cell单元格的字体样式
-
html的背景样式图片
-
Oracle将查询的结果放入一张自定义表中并再查询数据
-
Android自定义可点击的ImageSpan并在TextView中内置View
-
html5的自定义data-*属性与jquery的data()方法的使用
-
html5中 media(播放器)的api使用指南
-
BootStrap框架中的data-[ ]自定义属性理解(推荐)
-
Ajax异步获取html数据中包含js方法无效的解决方法
-
Editplus中的代码怎么直接查看HTML效果?