通过hue-rotate滤镜改变progress进度指示颜色

马黑黑

调整 hue-rotate 值：

0deg

马黑黑

progress 标签的进度指示色在现代浏览器中默认是 #0078D7，蓝色系。凡颜色不是黑灰白的，都可以通过色相旋转将其变成色盘中的相应色彩（没有黑灰白），一楼就是演示这个，也可从中拿到 hue-rotate 的角度参数值（注意不能少 deg 单位）。

一楼完整代码：

1. <style>
   
2.         .prog-wrapper { margin: auto; padding: 60px; width: 400px; height: 300px; }
   
3.         .tMid { text-align: center; }
   
4. </style>
   
5. 
   
6. <div  class="prog-wrapper">
   
7.         <p class="tMid">
   
8.                 <progress id="prog"></progress>
   
9.         </p>
   
10.         <p>
    
11.                 <br><br><label for="rangeAngle">调整 hue-rotate 值：</label>
    
12.                 <input id="rangeAngle" type="range" min="0" max="360" value="0" />
    
13.                 <output id="deg">0deg</output>
    
14.         </p>
    
15. </div>
    
16. 
    
17. <script>
    
18.         rangeAngle.oninput = () => {
    
19.                 deg.value = rangeAngle.value + 'deg';
    
20.                 prog.style.setProperty('filter', `hue-rotate(${rangeAngle.value}deg)`);
    
21.         };
    
22. </script>

复制代码

杨帆

真好！可以随意改变进度指示颜色了，谢谢马老师经典分享

红影

奇怪，我用edge浏览器，则调整了也看不到颜色改变。
用百分浏览器可以调颜色，但是歌词同步里的颜色剪切无法剪。
好像这两个浏览器都不能用

红影

我好像就这两个浏览器，真奇怪，为什么edge看不到颜色变化，是我的设置问题么？

山人

红影 发表于 2025-9-7 14:51
奇怪，我用edge浏览器，则调整了也看不到颜色改变。
用百分浏览器可以调颜色，但是歌词同步里的颜色剪切无 ...

你的EDGE浏览器需要升级

马黑黑

红影 发表于 2025-9-7 14:53
我好像就这两个浏览器，真奇怪，为什么edge看不到颜色变化，是我的设置问题么？

如果看不到，不是版本太低，就是设置混乱了。先清除浏览器缓存试试，不行的话恢复设置，还不行的话更新浏览器到最新版本

红影

山人 发表于 2025-9-7 15:41
你的EDGE浏览器需要升级

嗯嗯，我去清理了一下历史记录，果然可以了，谢谢

红影

马黑黑 发表于 2025-9-7 15:55
如果看不到，不是版本太低，就是设置混乱了。先清除浏览器缓存试试，不行的话恢复设置，还不行的话更新浏 ...

是的，已经找到问题所在了，现在好了

马黑黑

红影 发表于 2025-9-7 19:53
是的，已经找到问题所在了，现在好了

鱼吃的少了容易出问题

红影

马黑黑 发表于 2025-9-7 21:38
鱼吃的少了容易出问题

吃多了鱼的小命出问题。

马黑黑

红影 发表于 2025-9-8 22:39
吃多了鱼的小命出问题。

鱼基本都是人工养殖了，专门养来吃的，不是你想保护的宠物鱼

红影

马黑黑 发表于 2025-9-9 08:05
鱼基本都是人工养殖了，专门养来吃的，不是你想保护的宠物鱼

哦哦，那还好

马黑黑

红影 发表于 2025-9-9 21:43
哦哦，那还好

宠物鱼一般都不会有人吃的，死了就拿去喂鱼

红影

马黑黑 发表于 2025-9-9 21:44
宠物鱼一般都不会有人吃的，死了就拿去喂鱼

拿鱼喂鱼？

马黑黑

红影 发表于 2025-9-10 12:30
拿鱼喂鱼？

也有做肥料的

红影

马黑黑 发表于 2025-9-10 13:44
也有做肥料的

嗯嗯，已经死去的鱼无论怎么处理都行，生命毕竟不存在了。

马黑黑

红影 发表于 2025-9-10 21:24
嗯嗯，已经死去的鱼无论怎么处理都行，生命毕竟不存在了。

但按你的说法，精神永在

红影

马黑黑 发表于 2025-9-10 21:47
但按你的说法，精神永在

精神永生好像是你前一个回复里说的吧

马黑黑

红影 发表于 2025-9-10 22:56
精神永生好像是你前一个回复里说的吧

你很早以前说的是灵魂永在。我不认为有灵魂，所以用精神替代。