HTML5 进度条 "ending" 样式
HTML5 progress bar "ending" styling
我想通过向 HTML5 进度条添加小黑点来设置 "ending" 当前进度的样式,请看屏幕。所以这个点必须随着进度的移动而移动
但是the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the 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;
}
我在这里读到伪 css 似乎不适用于进度元素:
I wish that I could have used :after (or ::after) rules instead, but
these pseudo-elements don’t work with the progress tags in any browser
that doesn’t use the polyfill. And no, :before doesn’t work either. I
have no idea why it doesn’t work, but it’s a shame — using them would
be perfect to get rid of the extra markup.
在此处找到:http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
我不确定它之前为什么起作用,我一直没能找到一种非 JS 方法来模拟使用 ::after css.
的效果
Here's 您引用的那篇文章中的一个 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 有一些与您正在尝试做的类似的东西,但您可能需要对其进行适当的修改以使其按您想要的方式运行。
抱歉,这不是一个完全正确的解决方案,但希望您能找到一个不太难创建的解决方法。
您不需要伪元素即可获得此效果。这里是在主样式上使用渐变。 (仅在 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>
我想通过向 HTML5 进度条添加小黑点来设置 "ending" 当前进度的样式,请看屏幕。所以这个点必须随着进度的移动而移动
但是the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the 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;
}
我在这里读到伪 css 似乎不适用于进度元素:
I wish that I could have used :after (or ::after) rules instead, but these pseudo-elements don’t work with the progress tags in any browser that doesn’t use the polyfill. And no, :before doesn’t work either. I have no idea why it doesn’t work, but it’s a shame — using them would be perfect to get rid of the extra markup.
在此处找到:http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
我不确定它之前为什么起作用,我一直没能找到一种非 JS 方法来模拟使用 ::after css.
的效果Here's 您引用的那篇文章中的一个 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 有一些与您正在尝试做的类似的东西,但您可能需要对其进行适当的修改以使其按您想要的方式运行。
抱歉,这不是一个完全正确的解决方案,但希望您能找到一个不太难创建的解决方法。
您不需要伪元素即可获得此效果。这里是在主样式上使用渐变。 (仅在 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>