Goodbye JQuery color-picker plugins

Color picker input in HTML5

  • Share

Masterclass In HTML5 And 006A lot of browser these days support HTML file but not all of them in the same percentage. There are really cool stuff in there which makes developers and designers life a lot easier. Instead of searching for the right JQuery plugin, all you need now is just one line of HTML code to have out of the box functionality.

Recently I had a task to build an edit form and one of the fields was color. Of course I could just go with simple text input and request from the client to enter value by typing the hex color into text filed. Of course, text field or hidden field will be there when form is submitted but some color picker needs to be there too to improve UX.

As usually I opened Google and started looking for some simple color-picker JQuery plugin. In one of the articles I run onto color input type. Just out of curiosity I gave it a try and something I did no expected actually happen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <title>HTML5 Colorpicker</title>
    <form method="POST">
      <input type="color" name="SectionColor" id="SectionColor" /> 

This was the output in Firefox of this HTML

Color Picker Ffx

I checked in Chrome and it worked fine, but unfortunately this did not work in newest IE11 :(

So, for quite some time we will have to use JQuery color pickers but hopefully all major browsers will support not only this, but also others HTML input types.

The complete list of new HTML inputs is descried on w3cschools website, link is attached in references for this article.

At the end I end up with hybrid solution which enables new HTML5 color input for non IE browsers and uses JQuery color picker plugin for IE only.


  • Share


Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

Comments for this article

comments powered by Disqus