El selector de date de iOS HTML5 no aceptará ancho: 100%;

Tengo un selector de date html5 en mi formulario para una versión mobile de mi sitio. Todas mis inputs de text están configuradas en ancho: 100% y su padre td está configurado en padding-right: 15px para que se ajuste. Esto significa que mis campos están bien formateados y se ajustan para llenar siempre la mitad del contenedor cuando cambia la orientación del dispositivo. Sin embargo, el datepicker no se comporta de la misma manera, ¿alguien puede ayudar?

Formar:

<form method="get" action="home"> <table id="form"> <tr><td> <input type="text" name="Title" class="tbox" placeholder="Title" /> </td><td> <input type="text" name="Genre" class="tbox" placeholder="Genre" /> </td></tr> <tr><td> <input type="text" name="Location" class="tbox" placeholder="Location" /> </td><td> <input type="date" name="Date" class="tbox" placeholder="DD/MM/YY" /> </td></tr> <tr><td> <input type="text" name="postcode" class="tbox" id="postcode" placeholder="Postcode" /> </td><td> <input type="number" name="radius" class="tbox" placeholder="Mile Radius" /><br /> </td></tr> </table> <input type="submit" value="Search" /> </form> 

CSS relevante:

 .tbox { background-color: #a1c9ff; border: 1px solid #003f94; width: 100%; height: 30px; margin: 3px 2px; padding: 0 5px; border-radius: 15px; font-size: 18px; float: left; } table#form tr td { overflow: hidden; padding-right: 15px; } 

 .tbox { min-width:100%; } table#form { width:100%; } 

use ancho 100% para la tabla # forma y min-ancho: 100% para .tbox, espero que esto pueda resolver su problema. han actualizado el jsfiddle http://jsfiddle.net/brfQf/1/

Este estilo CSS soluciona el problema en el Safari mobile:

 -webkit-appearance: none; 

Sin embargo, cambia la apariencia de input.

Parece que .tbox tiene un ancho de 100% y un relleno. Esto daría como resultado que la caja se extienda fuera de su área deseada. Para resolver esto, puede intentar agregar box-sizing: border-box;

 .tbox { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

Puede usar un valor fijo, por lo tanto, puede usar esta unidad para hacerlo a pantalla completa:

 width: 100vw 

Pero debes considerar su compatibilidad. Aquí hay un enlace sobre su compatibilidad:

http://caniuse.com/#search=vw