编辑 ：如今所有主要浏览器都支持

• <进度>

• 输入[类型=’范围’

因此， 您应该使用这两个方法之一，如其他答案中所述 ，这不再是公认的答案。

的<input type="range">是非常新的，您已经尝试使用CSS对其进行自定义。:)

我不会尝试这样做有两个原因：

1. 有 可能是现在和未来数（或多个）年巨大的兼容性问题 。想想如今，像这样的表单控件<select>（自网络启动以来就可用）仍然存在问题，无法通过跨浏览器的方式使用CSS进行自定义。例如，如果padding为选择框设置a ，则许多浏览器（IE7，OPERA9，CHROME5，SAFARI4）将完全忽略填充。它仅适用于IE8和FF 3.6。（所有测试都是在标准模式下使用HTML5 DOCTYPE完成的）。

2. 在<input type="range">已经建立，以 显示滑块不是一个进度条 ，试图以改造滑块到进度条听起来离奇用CSS就可以欺骗。就像尝试使用CSS将a更改<textarea>为表一样，但是为什么不简单地使用a <table>来渲染表呢？

要在HTML5中显示进度条，您应该遵循 marcgg 在其答案中给出的建议。由于当前没有浏览器在渲染它，因此您可以使用带有ap的简单div，如下所示：

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
</div>

然后只需按百分比更新style.width内部P元素的，例如：

width: 75%

仅供参考：如果您想在简单的JS中执行此操作，则代码如下：

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';