As I stated in my post HTML5 Date Picker, Opera 11 is ahead of some of the other non-beta web browsers in implementing some of the expected HTML5 tags. In this post, I look at Opera's implementation of the HTML5 "color picker" as an illustration of what is possible when the other browsers begin adding their own implementations.
I use the following simple HTML code to demonstrate Opera 11's color picker.
There's not much in the code above for a color picker (just
<input type="color"> with a "name" attribute and an "onchange" event to make things a little more interesting). Before demonstrating this code in action on the five major browsers, I'll point out that the code works on all the browsers. What differentiates Opera's treatment from the other browsers is that Opera provides an elegant control to allow the user to select a color or type in a color's code. The other browsers (non-beta versions) do not provide a nice control at this point, but the code still works in them if the user types in a recognized color string.
Opera 11's Color Picker
Firefox 3.6's "Color Picker"
Firefox 3.6 does not support the color picker as well as Opera 11. Indeed, it is presented as a simple text field. The good news is that if the user types a String that can be interpreted as a valid color code, the functionality still works appropriately. This is demonstrated in the next set of screen snapshots.
Chrome 8's "Color Picker"
Chrome 8's "color picker support" is very similar to Firefox 3.6's as is illustrated in the next three images.
Safari 5's "Color Picker"
Safari 5 provides the same level of support for color picker as Chrome 8 and Firefox 3.6.
Internet Explorer 8's "Color Picker"
Internet Explorer 8 support is similar to that of all the previously covered browsers other than Opera 11.
Original Post Available at http://marxsoftware.blogspot.com/