2

How can i stylize html5's range control to like this screenshot

alt text

coure2011
  • 40,286
  • 83
  • 216
  • 349
  • 1
    first search stackoverflow ;) http://stackoverflow.com/questions/2979297/is-there-a-way-to-style-html5s-range-control – Tim Sep 27 '10 at 08:33
  • This is like saying "How can I stylize html5's file control..." – mauris Sep 27 '10 at 08:33
  • @thephpdeveloper wrong. Styling the file control is forbidden because of security reasons. – Felix Apr 04 '11 at 17:17
  • Well I know that of course. Most of these html5 controls are currently experimental and their View is subjected to browser's specification. – mauris Apr 05 '11 at 05:43

2 Answers2

1

You can't really do that. The spec doesn't define any formatting options. Live with the default look, or build your own using Javascript.

DanMan
  • 11,323
  • 4
  • 40
  • 61
0

You should take a look at the w3c article on "A vocabulary and associated APIs for HTML and XHTML" and scroll to: 4.10.7.1.14 Range state.

And check this out: jQuery style-able Range controls.

Edit:

After your comment, see this in the article I linked:

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; }

Attempted at: jsFiddle.net.

In chrome it appears as a horizontal range with no styles, in Opera as vertical range with no styles. in Firefox it appears as a textarea element with styles applied. I can't check IE because the download of IE9 broke it.

Kyle
  • 65,599
  • 28
  • 144
  • 152