iOS Safari会混淆输入类型=日期

Question

我正在使用HTML 5 <input type="date" />.在不同的浏览器中工作得很好,但总有一个人搞砸了一切:

查看日期字段是否按所需大小缩小

因此问题在于字段的大小:使用Bootstrap v3.2进行设计时,这些输入采用的形式class="form-control"应该使它们更宽(如上面的文本输入和下面的选择).

有没有办法说iOS的日期选择器应该是100%宽？style="width:100%"什么也没做.width:1000px确实有效,width:100% !important什么都不做.

谢谢您的帮助!

Answer 1

这修复了IOS上的所有日期字段.

input[type="date"]
{
    display:block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em;
}

Answer 2

这是iOS对待的方式input type="date".我不担心本机造型.它可能会关闭,但使用iOS的人习惯了它.

您可以min-width:95%在日期输入上使用.它至少在iOS 8中适用,并且不会改变外观.虽然我没有在Android或早期版本的iOS中测试过.或者,只需将其居中,您可以添加.center-block到输入中,因此至少它是中心并且看起来不那么近.

在此输入图像描述

.input-min-width-95p {min-width:95%;}

HTML:

<input type="date" class="form-control input-min-width-95p" ...