Question

我有一个进度条，我希望将其设置为远离默认值。

我尝试了一些东西，但它没有像我预期的那样工作。

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

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

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

您可以看到fiddle。

当我设置background-color颜色从蓝色变为绿色时，必须更改为蓝色。

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

我确实设置了border-radius，但这也没有成功。

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

}

Answer 1

您必须使用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: 2px; 
  width: 80%;
  height: 22px;
  margin-left:-11.5%;
}
progress::-webkit-progress-bar {
 background-color: #0091EA;
  border-radius: 2px;
}
progress::-webkit-progress-value {
   border-radius: 2px; 
}
progress::-moz-progress-bar {
  /* style rules */
}

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

要记住的一点是，有两种类型的进度条： indeterminate 和确定。如果您使用上述内容，您将改变两者的风格。如果您只想更改确定条的样式，可以执行以下操作。如果要将不确定的进度条设置为不同的样式，例如使用圆角微调器或类似的东西，这非常有用。

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 */
}

CSS中的自定义样式进度条

1 个答案: