управление диапазоном стиля HTML5

Question

Как мне стилизовать регулятор диапазона html5, чтобы понравился этот скриншот

Answer 1

Вы не можете этого сделать.В спецификации не определены параметры форматирования.Живите с внешним видом по умолчанию или создайте свой собственный, используя Javascript.

Answer 2

Вам следует взглянуть на статью w3c " Словарь и связанные API для HTML и XHTML " и прокрутить до: 4.10.7.1.14 Состояние диапазона .

И проверьте это: Стили управления диапазоном в стиле jQuery .

Редактировать:

После вашего комментария посмотрите это встатья, на которую я ссылаюсь:

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 сломала его.