progress元素的样式控制
  CSSWeb   0 评论

progress元素的样式控制

  CSSWeb   0 评论

首先,很有意思的一点,无论哪个现代浏览器,只要设置了 borderbackground-color 样式,进度条元素就会变成扁平化风格

样式控制的巨大差异

一般而言,一个进度条元素分为两部分,背景条以及已完成的进度条。

浏览器 FireFox 18 Chrome 23 Opera 12 IE 10
元素区域 边框 背景 已完成背景 边框 外背景 内背景 已完成背景 边框 背景 已完成背景 边框 背景 已完成背景
{border: *;} ![支持](https://www.zhangxinxu.com/study/image/ok.gif) ![支持](https://www.zhangxinxu.com/study/image/ok.gif) ![支持](https://www.zhangxinxu.com/study/image/ok.gif) ![支持](https://www.zhangxinxu.com/study/image/ok.gif)
{background:*;} ![支持](https://www.zhangxinxu.com/study/image/ok.gif) ![支持](https://www.zhangxinxu.com/study/image/ok.gif) ![支持](https://www.zhangxinxu.com/study/image/ok.gif) ![支持](https://www.zhangxinxu.com/study/image/ok.gif)
{color:*;} 不支持 不支持 不支持 ![支持](https://shiruihua.cn/usr/uploads/2018/09/3297447688.gif)
::-prefix-progress-value{background:*;} ![不支持](https://shiruihua.cn/usr/uploads/2018/09/3606856624.gif) ![支持](https://shiruihua.cn/usr/uploads/2018/09/3297447688.gif) ![不支持](https://shiruihua.cn/usr/uploads/2018/09/3606856624.gif) ![不支持](https://shiruihua.cn/usr/uploads/2018/09/3606856624.gif)
::-prefix-progress-bar{background:*;} ![支持](https://shiruihua.cn/usr/uploads/2018/09/3297447688.gif) ![支持](https://shiruihua.cn/usr/uploads/2018/09/3297447688.gif) ![不支持](https://shiruihua.cn/usr/uploads/2018/09/3606856624.gif) ![不支持](https://shiruihua.cn/usr/uploads/2018/09/3606856624.gif)

结论:

  1. 使用 progress {border: *; background: *;} 可以控制所有浏览器下 progress 元素的边框和背景色。其中,Chrome浏览器是个特例,直接的设置看不到效果(实际上支持),原因下面会解释。

  2. FireFox浏览器
    已经完成的进度条,使用progress::-moz-progress-bar { }表示,这与Chrome浏览器是相反的。

  3. Chrome浏览器
    Chrome的表现与FireFox有着明显的差异,其 progress 元素的结构似乎是这样的:

    progress┓
        progress-value
        progress-bar

    其中,progress-bar指全部的进度,progress-value指已经完成的进度
    因此,Chrome浏览器下,已经完成的进度条,使用progress::-webkit-progress-value { }表示,而progress-bar默认含有背景色,因此,我们需要如下设置,以自定义背景色:
    progress::-webkit-progress-bar { background: *; }
    progress{background:*;}为什么不能让 progress 元素背景色改变呢?不是不能改变,而是被 progress-bar 这个内部元素给覆盖了,当我们设置:progress::-webkit-progress-bar { background: transparent; }的时候,progress{background:*;}设置的背景色就会显露出来。
    对于Chrome等浏览器,如果希望进度条是圆角,可以这么处理:

    progress::-webkit-progress-inner-element { border-radius: 4px; }
    progress::-webkit-progress-value { border-radius: 4px; }
    progress::-webkit-progress-bar { border-radius: 4px; }
  4. Opera浏览器
    Opera似乎没有什么::-o-progress-*{}的用法,因此,Opera浏览器,其已完成进度的背景色是无解的,只能使用默认的颜色

  5. IE10浏览器
    IE10浏览器很奇葩的,它也可以设置已完成进度的背景色,使用的是color属性,progress{color:*;}

因此,综上全部,我们可以使用类似下面的 CSS 实现最大兼容的自定义进度条样式:

progress {
    width: 160px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10*/
}

progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value  { background: #0064B4; }

文章来源

回复