如何更改进度条值的border-radius?

时间:2016-01-14 19:30:32

标签: html css html5 css3 progress-bar

我无法更改HTML5 <progress>元素值的border-radius。我尝试将边框半径应用于progress元素本身和progress[value],但这似乎没有做任何事情。

所以我希望进度条值看起来像这样:enter image description here

而不是:enter image description here

以下是我目前的情况:https://jsfiddle.net/8m93Lorn/1/

有什么想法吗?

2 个答案:

答案 0 :(得分:7)

为此,您需要这样做:

似乎这些是重复的,但这实际上确保它适用于所有浏览器

progress {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-webkit-progress-bar {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-moz-progress-bar {
    border: 0;
    height: 40px;
    border-radius: 20px;
}

Fiddle

希望这有帮助!

答案 1 :(得分:1)

在我的Chrome作品中使用此代码

progress[value]::-webkit-progress-bar {
  background-color: #ededed;
  border-radius: 40px;
}

progress[value]::-webkit-progress-value {
  border-radius: 40px;
  background-color:lightblue;
}

https://jsfiddle.net/8m93Lorn/2/