如何使用CSS自定义HTML5输入范围类型的外观？

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

• <进度>

• 输入[类型=’范围’

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

的

<input type="range">

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

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" >   <p >&nbsp;</p></div>

然后只需按百分比更新

style.width

P

width: 75%

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

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