如何使用CSS自定义HTML5输入范围类型的外观？
我想自定义HTML5中范围输入类型的外观，使其看起来像进度条。我尝试使用CSS类应用一些常见的CSS属性，但似乎它们不起作用。
谁能指导我如何自定义它？
问题答案：
编辑 ：如今所有主要浏览器都支持
-
<进度>
-
输入[类型=’范围’
因此， 您应该使用这两个方法之一，如其他答案中所述 ，这不再是公认的答案。
的<input type="range">是非常新的，您已经尝试使用CSS对其进行自定义。:)
我不会尝试这样做有两个原因：
-
有 可能是现在和未来数（或多个）年巨大的兼容性问题 。想想如今，像这样的表单控件
<select>（自网络启动以来就可用）仍然存在问题，无法通过跨浏览器的方式使用CSS进行自定义。例如，如果padding为选择框设置a ，则许多浏览器（IE7，OPERA9，CHROME5，SAFARI4）将完全忽略填充。它仅适用于IE8和FF 3.6。（所有测试都是在标准模式下使用HTML5 DOCTYPE完成的）。 -
在
<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;"> </p>
</div>
然后只需按百分比更新style.width内部P元素的，例如：
width: 75%
仅供参考：如果您想在简单的JS中执行此操作，则代码如下：
document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';
-
问题内容： 我正在制作一个要使用范围滑块的网站（我知道它仅支持Webkit浏览器）。 我已经将其完全集成并且可以正常工作。但我想使用a 来显示当前的幻灯片值。 我的意思是，如果最初滑块的值为5，那么在文本框中它应显示为5，当我滑动文本框时，其值应更改。 我可以仅使用还是使用。我想避免。可能吗？ 问题答案： 这使用javascript，而不直接使用jquery。它可能有助于您入门。
-
问题内容： 例如，我想创建一个类似于AngularJS实现“电子邮件”的自定义输入类型。 我要创建的是这样的输入类型： 关于如何做到这一点的任何想法？到目前为止，我仅能弄清楚如何实现自定义指令，其中“ path”是标记，属性或类的名称。 例如，我可以使它工作，但是它与其他表单字段 不一致 ，我真的希望它们看起来相同。 问题答案： 如果type属性设置为“ path”，则可以通过使用自定义逻辑创建输
-
问题内容： 我有一个使用以下代码呈现的数字类型输入： 看起来像这样： 我想把它变成这样： 使用两个单独的按钮模拟第二个视图。 如何按所述方式设置箭头样式？ 问题答案： tl; dr： 被问到太多次了，所以我为Bootstrap 4 + jQuery + Font Awesome输入组设置添加了一个快速演示： 长（初始）答案： 本机控件不是可样式化的跨浏览器。实现所需的跨浏览器/跨设备的最简单，最安
-
问题内容： 我想知道是否可以在Chrome和Firefox中显示刻度线以输入数字？我在这个问题上能找到的最接近的东西是这个。 问题答案： 当涉及到样式时，输入范围仍然有些噩梦。这就是说，在各大浏览器中显示刻度线 是 可能的，有点苦劳和浏览器的特定解决方案。 Internet Explorer / Edge 如您所知，默认情况下，如果添加HTML 属性，Internet Explorer将显示刻度。
-
使用数据块报告版本4， 报告中有添加自定义css的规定， 要查找正确的语法，请尝试这两种方法，但不适用：
-
本文向大家介绍在Firefox中可以用于垂直方向的HTML5输入类型范围？，包括了在Firefox中可以用于垂直方向的HTML5输入类型范围？的使用技巧和注意事项，需要的朋友参考一下 现在有可能。在Firefox Web浏览器中可以使用垂直方向的HTML5输入类型范围。 以下是CSS-