在CSS中自定义样式进度条

Question

在CSS中自定义样式进度条

htmlcss

36

我有一个进度条，想要将其样式与默认值区分开来。

我试了一些方法，但效果不如预期。

我想改变进度条的背景颜色和边框半径。

当我设置背景颜色时，它从默认的蓝色变成了绿色，而不是我设置的颜色。

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

您可以查看这个示例。

当我设置background-color时，颜色从蓝色变为绿色，需要更改为另一种蓝色。

我希望进度条有一个平滑的边缘。

我已经设置了border-radius，但仍未解决问题。

.amount-progress {
  width: 80%;
  margin-left: -11.5%;
  height: 22px;
  background-color: #0091EA;
}

- Naveen Kumar

1

可能是重复的问题，参考如何更改HTML5进度条的颜色。 - caramba

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Teshtek · Accepted Answer

您需要使用 HTML5 进度条工具包。以下是用于样式化 HTML5 进度条的全部选择器：

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

所以：

progress {
  border-radius: 7px; 
  width: 80%;
  height: 22px;
  margin-left: -11.5%;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: yellow;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 7px;
  box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
  /* style rules */
}

<progress value="3333" max="10000">33%</progress>

需要记住的一件事是，进度条有两种类型：不确定和确定。如果您使用上述代码，将更改两者的样式。如果只想更改确定性进度条的样式，则可以执行以下操作。如果您想为不确定的进度条设置不同的样式，例如带有圆角旋转器或类似的内容，则此方法会很有用。

progress {
    display: block;
}

    /* Determinate: */

    progress[value] {
      /* style rules */
    }
    progress[value]::-webkit-progress-bar {
      /* style rules */
    }
    progress[value]::-webkit-progress-value {
      /* style rules */
    }
    progress[value]::-moz-progress-bar {
      /* style rules */
    }

    /* Indeterminate: */

    progress:not([value]) {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-bar {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-value {
      /* style rules */
    }
    progress:not([value])::-moz-progress-bar {
      /* style rules */
    }

<p>Determinate:</p>

<progress value="66" max="100">Determinate</progress>

<p>Indeterminate:</p>

<progress>Indeterminate</progress>