如何更改进度条值的边界半径? [英] How to change border-radius of progress bar value?

问题描述

我无法更改HTML5 < progress> 元素的值的边界半径.我尝试将边框半径应用于progress元素本身和 progress [value] ，但这似乎无济于事.

I'm having trouble changing the border-radius of the value of an HTML5 <progress> element. I try applying a border radius to the progress element itself and to progress[value], but that doesn't seem to do anything.

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

So I want the progress bar value to look something like this:

代替此:

这是我到目前为止的内容: https://jsfiddle.net/8m93Lorn/1/

Here is what I have so far: https://jsfiddle.net/8m93Lorn/1/

有什么想法吗?

推荐答案

要这样做，您需要这样做:

To do so you need to do it like so:

这些似乎是重复的，但这实际上确保了它在所有浏览器中都可以使用

It seems like these are duplicates, but this actually makes sure that it works across all browsers

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

小提琴

希望这会有所帮助！

这篇关于如何更改进度条值的边界半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！