進度條消除灰色

我不完全確定它是否可能。但我想刪除此進度條的灰色地帶：進度條消除灰色

enter image description here

progress, progress[role] { 
    border: none; 
    background-size: auto; 
    height: 24px; 
    background-color: green; 
    width: 100%; 
} 
.skill-list { 
    list-style: none; 
    margin: 0; 
    padding: 1em; 
} 
.skill { 
    margin-bottom: 1em; 
    position: relative; 
} 
.skill h5 { 
    color: #fff; 
    left: 1em; 
    line-height: 1; 
    position: absolute; 
    top: -10px; 
    text-transform: uppercase; 
} 
.skill ::-webkit-progress-value { 
    -webkit-animation: bar-fill 2s; 
    width: 0px; 
} 
.skill-1::-webkit-progress-value { 
    background: #ff9e2c; 
    border-radius: 5px; 
} 
.skill-1::-moz-progress-bar { 
    background: #ff9e2c; 
    border-radius: 5px; 
} 
.skill-2::-webkit-progress-value { 
    background: #4ecdc4; 
    border-radius: 5px; 
} 
.skill-2::-moz-progress-bar { 
    background: #4ecdc4; 
} 
.skill-3::-webkit-progress-value { 
    background: #ff6b6b; 
    border-radius: 5px; 
} 
.skill-3::-moz-progress-bar { 
    background: #ff6b6b; 
    border-radius: 5px; 
} 
@-webkit-keyframes bar-fill { 
    0% { 
     width: 50px; 
    } 
} 
@keyframes bar-fill { 
    0% { 
     width: 50px; 
    } 
}

這可能嗎？

來源

2014-02-17 TrippedStackers

對我們現場演示一起工作呢？ –

http://jsfiddle.net/WQ7ch/ yeah – TrippedStackers

@TrippedStackers它在你的小提琴中是綠色的.. – CRABOLO

只需添加這些：

progress[value]::-webkit-progress-bar { 
    background-color: #FFF; 
} 

progress::-moz-progress-bar { 
    background: #FFF; 
}

例子：http://jsfiddle.net/WQ7ch/1/

來源

2014-02-17 02:00:44 solusipse

進度條消除灰色

回答

相關問題