Chrome HTML进度条与自定义背景颜色有设计问题，如果它有低的价值观

vtwuwzda 于 2023-08-01 发布在 Go

关注(0)|答案(1)|浏览(93)

此自定义CSS进度条在500值超过1000时有效，但在5值超过1000时失败：

如何避免左边这条不美观的竖线？（浏览器： chrome ）

的数据

progress { appearance: none; }
progress::-webkit-progress-value { border-radius: 10px; background-color: #00122c; }
progress::-webkit-progress-bar { border: 1px solid #00122c; border-radius: 10px; background-color: white; }

个字符

google-chrome

来源：https://stackoverflow.com/questions/76606203/html-progress-bar-with-custom-background-color-has-design-problem-if-it-has-low

1条答案

按热度按时间

8aqjt8rx1#

将border-radius和border定义移动到progress元素并隐藏溢出：

progress {
  appearance: none;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #00122c;
}

progress::-webkit-progress-value {
  border-radius: 10px;
  background-color: #00122c;
}

progress::-webkit-progress-bar {
  background-color: white;
}

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

Chrome HTML进度条与自定义背景颜色有设计问题，如果它有低的价值观

1条答案

相关问题

热门标签

最新问答