iOS HTML5 date picker won't accept width: 100%;

Question

I have a html5 date picker in my form for a mobile version of my site. All my text inputs are set to width:100% and its parent td is set to padding-right:15px to make it fit. This means my fields are nicely formatted and adjust to always fill up half of the container when the orientation of the device changes. However the date picker does not behave in the same way, can anyone help?

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>

Relevant 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 width 100% for table#form and min-width:100% for .tbox, i hope this could solve your problem. have updated the jsfiddle http://jsfiddle.net/brfQf/1/

Answer 2

This css style fixes the problem in mobile Safari:

-webkit-appearance: none;

However, it changes input appearance.