HTML and CSS Reference
In-Depth Information
Table 3-5. Browser support for the range input type
IE
Firefox
Chrome
Safari
Opera
iOS
Android
-
-
10+
4.0+
10.0+ ✓✓
For tips on delivering a more consistent cross-browser experience, see
Recipe 3.13
.
Additional features
As with the
number
input type, you can specify minimum and maximum values using
the
min
and
max
attributes and an increment value using the
step
attribute. These could
be used with
range
to replace the radio buttons commonly used for scaled ratings, such
as satisfaction rankings.
3.6 Selecting Colors
Problem
You want to present a user with a form to select a color—for example, to customize
the look of a web page.
Solution
Use the
input
element with the HTML5
type
value of
color
:
<form>
<p><label>Background color <input
type="color"
name="bg"></label></p>
<p><label>Foreground color <input
type="color"
name="fg"></label></p>
<p><button type="submit">Submit</button></p>
</form>
Discussion
The
color
input type restricts the value to a valid RGB value in hexadecimal format,
including the number sign or octothorpe,
#
, displayed before the six digits.
The HTML5 specification prescribes a color-well control for this input type, but so far
only Opera has implemented this control. Webkit-based browsers that support
color
, like Chrome and Safari, render a text input field but successfully validate entries
