IOS HTML5 date picker will not accept width: 100%;

Question

I have an html5 date picker in my form for the mobile version of my site. All my text inputs are set to width: 100%, and the parent td is set to padding-right: 15px so that it matches. This means that my fields are well formatted and always allow me to fill half the container when changing the orientation of the device. However, choosing a date does not behave the same, can anyone help?

the form:

<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> 

Matching CSS:

 .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; } 

Answer 1

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

use 100% width for table shape and min-width: 100% for .tbox, I hope this can solve your problem. updated jsfiddle http://jsfiddle.net/brfQf/1/

Answer 2

This css style fixes the issue on mobile Safari:

 -webkit-appearance: none; 

However, it changes the appearance of the input.

Answer 3

It seems that .tbox has 100% width and padding. This will cause the box to go beyond the required area. To solve this problem, you can try adding box-sizing: border-box;

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

Answer 4

It can use a fixed value. So you can use this device to make it fullscreen:

 width: 100vw 

But you need to consider its compatibility. Here is a link about its compatibility:

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