我无法更改HTML5 <progress>
元素值的border-radius。我尝试将边框半径应用于progress元素本身和progress[value]
,但这似乎没有做任何事情。
以下是我目前的情况:https://jsfiddle.net/8m93Lorn/1/
有什么想法吗?
答案 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;
}
希望这有帮助!
答案 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;
}