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

Question

我正在使用HTML 5＆＃39; <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添加到输入中，因此至少它是中心并且看起来不那么近。

DEMO：http://jsbin.com/civor/1/

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

HTML：

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

Answer 3

在我的情况下，我用＆＃34; new＆＃34; flexbox布局类型：

    input {
        display:flex;
        display:-webkit-flex;
        flex: 1 0 0;
        -webkit-flex: 1 0 0;
    }

DEMO：http://output.jsbin.com/bugeqowamu/1

注意：容器中还必须有display: flex;，如演示文稿。

Answer 4

此问题有两种解决方案，如下面的代码所示。你可以使用它们中的任何一个。

在ios方法1上将增加控制的宽度，同时它将改变其UI并看起来像普通输入框，即它不会显示下拉符号，如方法1中所示OUTPUT和方法2只会增加控制的宽度而不删除下拉符号，如方法2 OUTPUT

中所示

方法1输出

方法2输出

.c1{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.c2{
 min-width:95%;
}

Method 1)
<input type="time" class="form-control c1" name="txtIn"
												id="txtIn" >
 <br/><br/> <br/>
Method 2)                        
<input type="time" class="form-control c2" name="txtOut"
												id="txtOut" >

Answer 5

Twitter引导程序是移动优先的，也适用于所有现代浏览器...... 您可以使用一些响应式实用程序... like