如何更改進度條值的border-radius？

Question

我無法更改HTML5 <progress>元素值的border-radius。 我嘗試將一個邊界半徑應用於progress元素本身並progress[value] ，但這似乎沒有做任何事情。

所以我希望進度條值看起來像這樣：

而不是這個：

這是我到目前為止： https ： //jsfiddle.net/8m93Lorn/1/

有任何想法嗎？

Answer 1

為此，您需要這樣做：

看起來這些是重復的，但這實際上確保它適用於所有瀏覽器

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;
}

小提琴

希望這可以幫助！

Answer 2

在我的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/