Using CSS3 to style forms written in HTML5

Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.

When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.

The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.

Internet Explorer? Better don’t ask. No support whatsoever.

So the results:

1. Mozilla 3: rounded corners + / HTML 5 elements
   
2. Chrome: rounded corners + (they look weird) / HTML 5 elements -
   
3. Safari: rounded corners + / HTML 5 elements -
   
4. Opera 9: rounded corners – / HTML 5 elements +
   
5. IE (doesn’t matter which one): rounded corners – / HTML 5 elements -
   

It seems we have to wait a little longer till we can drop Javascript from styling the forms 

UPDATE

Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you