html 如何更改加载栏背景而不恢复到默认设置？[副本]

eivnm1vs 于 11个月前发布在其他

关注(0)|答案(2)|浏览(62)

此问题已在此处有答案：

Custom styling progress bar in CSS（1个答案）
4个月前关闭。
首先，这是我在HTML和CSS方面使用的代码：

progress {
  color-scheme: light dark;
  accent-color: RGBA(30, 170, 255, 1);
}

个字符
对于我的问题，方案设置没有任何变化，重音只影响加载进度颜色。
当我想要的是浅灰色背景时，我的加载栏目前看起来是蓝色进度栏和黑色背景的圆形，但是当我尝试指定背景颜色时，即使我尝试其他东西，如蓝色背景，该栏也会变为绿色，灰色背景和矩形形状。我该怎么解决这个问题？根据W3.org，CSS和HTML代码都是有效的。我目前正在使用Microsoft Edge浏览器测试我的代码，虽然我希望任何解决方案都能在大多数浏览器上运行，但我不在乎它是否能在Internet Explorer上运行。
例如：Insufficient version与此相比：Unwanted version的
我尝试在CSS文件中使用不同的背景，添加透明度，更改配色方案属性，定义加载栏形状，并使用内部样式标记而不是CSS代码的外部文件。

Html

来源：https://stackoverflow.com/questions/75840341/how-do-i-change-loading-bar-background-without-reverting-to-default-setting

2条答案

按热度按时间

flvtvl501#

在下面的例子中，我分享了代码并给出了解释。因此，您可以在不同的浏览器中设置进度元素的样式。

progress {
  /* style rules */
  background-color: pink;
  /* chrome, edge, opera, safari apply "webkit" stylesheet for progress bar*/
  -webkit-appearance: none;
  accent-color: orangered;
  /* sep 2021 - mar 2022 */
  height: 20px;
  border-radius: 10px;
}

progress::-webkit-progress-bar {
  /* style rules background in chrome, edge, opera */
  background-color: pink;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  /* style rules chrome edge opera value bar colour */
  background-color: orangered;
  border-radius: 10px;
  transition: width 0.4s ease-in;
}

progress::-moz-progress-bar {
  /* style rules ff equivalent to ::-webkit-progress-value */
  background-color: orangered;
  border-radius: 10px;
  transition: width 0.4s ease-in;
}

个字符

赞(0）回复(0）举报 11个月前

ie3xauqp2#

我在代码中找到了一个最初没有出现的相关问题的解决方案：

filter: alpha(opacity=60);
   opacity: 0.6;

字符串
我所需要做的就是添加代码，并使用更深的蓝色阴影来补偿。参见：How do I reduce the opacity of an element's background using CSS?

赞(0）回复(0）举报 11个月前

我来回答

html 如何更改加载栏背景而不恢复到默认设置？[副本]

2条答案

相关问题

热门标签

最新问答