如何在HTML5进度条内显示数据标签？（跨浏览器）

Question

我有一个样式化的 HTML5 进度条，我想在进度条内显示跨浏览器兼容的数据标签。目前显示在进度条上方

HTML:

<progress max="100" value="50" data-label="50% Complete"></progress>

CSS:

progress {
  text-align:center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0
}
progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar {
  background-color: #7cc4ff;
}

我得到以下结果，但我想将数据标签移到进度条内：

Answer 1

TL;DR：不要在 `<progress>` 元素上使用伪元素。

正如其他答案中所说，，HTML/CSS 进度条是比使用 <progress> 元素更好的解决方案。

基于 Gecko 的浏览器，如 firefox，根本不会显示伪元素。

但是，要回答您的问题，只需将文本放在进度条上即可：

progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  
  /* Set the progressbar to relative */
  position:relative;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0;
  
  /*Position text over the progress bar */
  position:absolute;
  left:0;
  right:0;
}
progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}
progress::-webkit-progress-value {
  background-color: #7cc4ff;
}
progress::-moz-progress-bar {
  background-color: #7cc4ff;
}

<progress max="100" value="50" data-label="50% Complete"></progress>

注意这没有有很好的浏览器支持（事实上，它很糟糕），因为 <progress> 是 replaced element，像 <input>。

CSS规范对于替换元素是否可以有伪元素没有完全明确，所以不同的浏览器有不同的渲染。基于 Webkit 的浏览器，例如 Chrome，有时会显示它们。基于 Gecko 的，比如 Firefox，不会。

请参阅 this answer 关于一个有点类似的问题。

因此，如果这是针对网站，而不是 electron 应用程序或类似应用程序，我高度建议使用 HTML/CSS 进度条：

.progress {
  height: 1.5em;
  width: 100%;
  background-color: #c9c9c9;
  position: relative;
}
.progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  top: 5px;
  left: 0;
  right: 0;
}
.progress .value {
  background-color: #7cc4ff;
  display: inline-block;
  height: 100%;
}

<div class="progress" data-label="50% Complete">
  <span class="value" style="width:50%;"></span>
</div>

注意：即使这是针对带有基于 webkit 的浏览器的应用程序，您仍然不应该在 <progress> 上使用伪元素。正如我上面所说，此功能的规范尚不清楚，将来可能会发生变化，从而破坏您的进度元素。 Webkit 也可能会放弃对此的支持。

我建议只使用HTML/CSS进度条，你以后会省去很多麻烦。

Answer 2

您需要做的就是在状态文本元素上将状态文本设置为具有 1 的 z-index（-1 无效，0 是默认值），然后设置负值margin-top: -32px（对于 height: 32px），您可以保留 progress 元素而不添加任何多余的元素：

<div style="z-index: 2;"><span>Staging item 144 of 271...</span></div>
<div style="margin-top: -32px;"><progress max="100" value="44">44%</progress></div>

Answer 3

显然我需要使 CSS HTML 进度条的文本居中并找到这个答案，但这里的答案没有居中文本。这是 HTML , CSS 文本居中的进度条。

#progress_container {
  width: 100px;
  background-color: rgb(161, 161, 161);;
  height: 30px;
  position: relative;
}

#progress_container_text {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
}

#progress_container_text_align_center {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#loading_bar {
  width: 30%;
  height: 100%;
  background-color: rgb(58, 166, 255);
}

<div id="progress_container">
  <div id="progress_container_text">
    <div id="progress_container_text_align_center">30%</div>
  </div>
  <div id="loading_bar"></div>
</div>

如何在HTML5进度条内显示数据标签？（跨浏览器）

How to display data label inside HTML5 progress bar? (cross-browser)

html

css

position

cross-browser

progress-bar

TL;DR：不要在 `<progress>` 元素上使用伪元素。

如何在HTML5进度条内显示数据标签？ （跨浏览器）

How to display data label inside HTML5 progress bar? (cross-browser)

html

css

position

cross-browser

progress-bar

TL;DR：不要在 <progress> 元素上使用伪元素。

如何在HTML5进度条内显示数据标签？（跨浏览器）

TL;DR：不要在 `<progress>` 元素上使用伪元素。