Usando CSS3 para dar estilo a formularios escritos en HTML5

Dar estilo a un formulario nunca es algo fácil de hacer, pero añadir CSS3 a un formulario HTML5 es una tarea que muestra una larga variedad de resultados en lo que se refiere a probar diferentes navegadores. Mire el link de prueba.

En lo que se refiere a CSS3 no es mucho lo que se puede hacer: pero añadir esquinas redondeadas, gradientes y sombras es mas que nada y el aspecto general del formulario es muuuuuuuuucho mejor. Pero HTML5 es soportado por pocos navegadores (éste formulario HTML sólo por OPERA) y CSS3 también por algunos navegadores – pero diferentes del que soporta HTML5.

El resultado

imposible ver el resultado en sólo un navegador: las esquinas redondeadas pueden ser vistas en Mozilla/Chrome/Safari y los elementos HTML5 en Opera.

Internet Explorer? Mejor ni pregunte. No hay soporte aún.

Así que los resultados:

  1. Mozilla 3: esquinas redondeadas + / elementos HTML5 –
    capture-2
  2. Chrome: esquinas redondeadas + (se ven extrañas) / elementos HTML5 –
    chrome-screenshot
  3. Safari: esquinas redondeadas + / elementos HTML5 –
    capture-3
  4. Opera 9: esquinas redondeadas – / elementos HTML5 +
    capture-1
  5. IE (sin importar cual): esquinas redondeadas – / elementos HTML –
    ie8-screenshot

Parece que tendremos que esperar un poco más hasta que podamos lanzar Javascript desde dar estilos a las formas.

ACTUALIZACIÓN

Ric Ferrer envió una captura de pantalla con el comportamiento del safari móvil desde su Ipod. Gracias 🙂

37555934