样式化html5的范围控件

Question

我如何样式化html5的范围控件以喜欢此屏幕截图

Answer 1

你真的不能那样做。 规范未定义任何格式设置选项。 保持默认外观，或使用Javascript构建自己的外观。

Answer 2

您应该看一下w3c文章“ HTML和XHTML的词汇表和相关的API ”，然后滚动至： 4.10.7.1.14 Range state 。

并检查以下内容： jQuery样式风格的Range控件 。

编辑：

发表评论后，请参阅我链接的文章：

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的下载中断了它。