HTML5 input type date, color, range support in Firefox and Internet Explorer

html internet-explorer firefox cross-browser

74,632

Solution 1

Since HTML5 hasn't been completely standardized yet, not all browsers do support these input types. The intended behaviour is to fall back to <input type="text">.

↪ See here for more information on browser support for HTML5 input types.

You can test for support using the Modernizr library or with some custom JavaScript. If you detect a certain HTML5 feature isn't available, you can fall back to JavaScript-based alternatives.

Solution 2

All browsers fallback to input type text if special input is missing. Its all about widgets and validation.

Following support range widget

Firefox Desktop 23

Firefox 29

Opera Desktop

Opaera

Chrome Desktop

chrome desktop

Chrome Mobile

Chrome mobile

IOS safari 5

IOS Safari 5

Following browsers now supports color widget

Firefox Desktop 29

Firefox 29 color input Ubuntu

Opera Desktop 11

Opera desktop color input

Chrome Desktop 20:

chrome input type color Ubuntu

Android 4.4 / Chrome Mobile :

chrome mobile color input

Opera mobile:

opera mobile color input

Blackberry:

blackberry color input

Firefox os 1.3

Firefox os now supports color input but i still don't have a screen shot

If u want u can use this http://www.eyecon.ro/colorpicker/

Solution 3

I had a similar problem with input type=range. Everything was working on all browser, except for Internet Explorer 10. It was not a problem with Internet Explorer, given that I could see the slider in other websites. The solution was to turn off i.e. compatibility view for my website.

74,632

Stanislas Piotrowski

Updated on May 30, 2020

Comments

Stanislas Piotrowski almost 4 years

I've build all my website using many forms with HTML5 (using the input types date, color and range.)

Everything works fine in Google Chrome.

But when I turn on Internet Explorer and Firefox, all input fields become like input type text.

Is there a way or a script I can download to make forcing the displaying of this input correctly?
- Muthu Kumaran over 11 years
  
  what doctype are you using?
- Stanislas Piotrowski over 11 years
  
  I use this doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Muthu Kumaran over 11 years
  
  I found a similar post stackoverflow.com/questions/3269004/…
- frogstarr78 about 10 years
  
  The html5 doctyp shold be <!DOCTYPE html>
- Moax6629 almost 10 years
  
  color type is being supported by firefox now..
Stanislas Piotrowski over 11 years

thanks for your reply. I've find a way in a french website. 41mag.fr/… the thing is that I met again some trouble. But this post Is ok. thanks for your help.
hypervisor666 almost 10 years

wow, thanks for going to the trouble of posting all these screen shots on different devices :)
whyoz over 9 years

and if you're app requires IE? Any simple libs to include?
aWebDeveloper over 9 years

you cpuld fallback to jquery ui
ZEESHAN ARSHAD about 9 years

Here is working solution: zeeshanarshad.com/…