iOS HTML5 日期选择器不接受宽度：100%；

Posted 2023-05-07

【中文标题】iOS HTML5 日期选择器不接受宽度：100%；

【英文标题】：iOS HTML5 date picker won't accept width: 100%;

【发布时间】：2013-04-27 00:22:03

【问题描述】：

我的表单中有一个用于移动版网站的 html5 日期选择器。我所有的文本输入都设置为 width: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;

【参考方案1】：

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

table#form 使用宽度 100%，.tbox 使用 min-width:100%，我希望这可以解决您的问题。已更新 jsfiddle http://jsfiddle.net/brfQf/1/

【讨论】：

这很好用，应该是正确接受的答案。

【参考方案2】：

这种 css 样式修复了移动 Safari 中的问题：

-webkit-appearance: none;

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

【讨论】：

8 年后问题仍然存在......但是现在您可以使用 appearance 而不使用前缀。值得注意的是，您可能想要在之后设置::-webkit-date-and-time-value 的样式（例如，输入字段中的文本居中，看起来很奇怪）。

【参考方案3】：

看起来 .tbox 同时具有 100% 的宽度和填充。这将导致框延伸到其所需区域之外。要解决此问题，您可以尝试添加 box-sizing: border-box;

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

【讨论】：

虽然这确实让我的文本框生活更轻松，但它并不能解决我的日期选择器问题

日期选择器到底在做什么而不是想要的效果？这就是我将它的 JSFiddle 放在一起时的样子。 jsfiddle.net/brfQf

在那个小提琴上，如果您将输出窗口调整为更薄，您会看到左半部分变薄而右半部分保持相同大小。当日期选择器在那里时，这不会发生。另外，在我的手机上，当我进入横向时，它并没有填满全尺寸。换句话说，它似乎忽略了 width:100% 而只是固定在 100px 左右。

【参考方案4】：

它可以使用一个固定的值，所以，你可以用这个单位让它全屏：

width: 100vw

但是你需要考虑它的兼容性，这里有一个关于它的兼容性的链接：

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