HTML5 进度条“结束”样式设计

Question

我希望通过在HTML5进度条的“结束”处添加小黑点来样式化当前进度，如屏幕所示。因此，此点必须随着进度的移动而移动。

但是我找到的代码现在不再起作用了。几周前还可以，但现在不行了 - 看一下codepen

也许有人知道发生了什么或如何实现我的目标?

非常感谢！

P.S.这是我使用的HTML/CSS

HTML:

<progress value="1400" max="4261"></progress>

CSS

progress {

  /* Positioning */
  position: absolute;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 50px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: #00D38D;
}

progress[value]::-webkit-progress-value {
  position: relative;
  background: #00d38d;  
}

progress[value]::-webkit-progress-value::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-radius: 50px;
  background: black;
}

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

progress::-webkit-progress-value {
  background-color: #00D38D;
}

progress::-moz-progress-bar {
  background-color: #00D38D;
}

- Paradoxetion

---

你可能需要使用JS。 - Jacob G

当然，我可以使用JS，但我想用CSS来做，特别是因为它以前可以工作，现在突然停止了。 - Paradoxetion

如果它的浏览器支持非常差，甚至最新的浏览器也只有不稳定的覆盖范围，那么你可能不应该使用它。 - Jacob G

Answer 1

您不需要使用伪元素来实现这种效果。这里是在主要样式中使用渐变的方法。（仅在Chrome中测试过）

progress {
  /* Positioning */
  position: absolute;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 50px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: #00D38D;
}

progress::-webkit-progress-value {
  background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}

progress::progress-value {
  background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}

<progress value="1400" max="4261"></progress>

- vals

---

谢谢。太棒了，帮了大忙！ - Paradoxetion

很高兴它有帮助！！ - vals

在Firefox中测试过了，但是不起作用。它只显示一个没有点的蓝色进度条。 - Gerard Brull

Answer 2

我在这里读到伪类CSS似乎不能与进度元素一起使用：

我希望我可以使用:after（或::after）规则，但是在不使用polyfill的任何浏览器中，这些伪元素都无法与进度标记一起使用。不，:before也不行。我不知道为什么不行，但这很遗憾——如果使用它们，就可以摆脱额外的标记。

在此找到：http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

我不确定为什么以前可以工作，我还没有找到一种非JS的方法来模拟使用::after CSS的效果。

这是从你引用的那篇文章中的Codepen，它也无法工作。

他们似乎正在使用与您相同的方法，但没有功能：

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo 
    elements on pseudo classes. A     rare phenomenon! */
    content: '';
    position: absolute;

    width:5px; height:5px;
    top:7px; right:7px;

    background-color: white;
    border-radius: 100%;
}

你可能需要实现一些JavaScript或使用除HTML5进度元素之外的不同方法来实现此功能。 Numbars有一些类似于你尝试做的事情，但你可能需要修改它相当多才能使其按照你想要的方式运行。

很抱歉这不是一个确切的解决方案，但希望你能找到一个不太难创建的解决方法。

- Mike A