在type为range的input标签上美化,做成一个进度条

发布于 2022-09-30 23:10:33 字数 221 浏览 17 评论 0

需求:做一个类似播放器中的进度条,在提供的input上修改
问题:在做到左部填充的时候没有可以直接修改的地方

我的思路是利用linear-gradient拼接左部填充色和背景颜色形成填充效果,试了一下是可行的,但是又遇到一个问题:当我要让背景颜色为从上到下的渐变左右渐变就不生效了。

有没有什么好的方法可以修改,或者更好的方法实现进度条左部的填充,大家有什么建议。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

中二柚 2022-10-07 23:10:33

从上到下的渐变,可以通过改变 background-size,下面实现了一个,可能是你需要的

image.png

https://codepen.io/xboxyan/pe...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文