造型html5的范围控制

Question

我如何将html5的范围控件设置为喜欢此屏幕截图

Answer 1

你真的不能这样做。规范没有定义任何格式选项。使用默认外观，或使用Javascript构建自己的。

Answer 2

您应该查看关于“A vocabulary and associated APIs for HTML and XHTML”的w3c文章并滚动到： 4.10.7.1.14范围状态。

然后查看：jQuery style-able Range controls。

修改

发表评论后，请在我关联的文章中看到这一点：

HTML：

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
 <option value="0">
 <option value="-30">
 <option value="30">
 <option value="+50">
</datalist>

CSS：

input { height: 75px; width: 49px; background: #D5CCBB; color: black; }

尝试：jsFiddle.net。

在chrome中，它显示为没有样式的水平范围，在Opera中显示为没有样式的垂直范围。在Firefox中，它显示为应用了样式的textarea元素。我无法检查IE，因为IE9的下载打破了它。