Question

我的表单中有一个html5日期选择器，用于我的网站的移动版本。我的所有文本输入都设置为宽度：100％，其父td设置为padding-right：15px以使其适合。这意味着我的字段格式很好，并且当设备的方向发生变化时，调整为总是填满容器的一半。但是，日期选择器的行为方式不一样，任何人都可以帮忙吗？

形式：

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

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

使用宽度100％表格形式和最小宽度：100％表示.tbox，我希望这可以解决您的问题。已经更新了jsfiddle http://jsfiddle.net/brfQf/1/

Answer 2

此css样式解决了移动Safari中的问题：

-webkit-appearance: none;

但是，它会改变输入外观。

Answer 3

看起来.tbox的宽度为100％，填充也是如此。这将导致盒子延伸到其所需区域之外。要解决此问题，您可以尝试添加box-sizing: border-box;

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

Answer 4

它可以使用固定值，因此，您可以使用此单位使其全屏显示：

width: 100vw

但您需要考虑其兼容性，以下是有关其兼容性的链接：

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

iOS HTML5日期选择器不接受宽度：100％;

4 个答案: