iOS safari 弄乱了输入类型=日期答案

【问题标题】：iOS safari messes up input type=dateiOS safari 弄乱了输入类型=日期
【发布时间】：2014-12-21 19:01:12
【问题描述】：

我正在使用 HTML 5 的 <input type="date" />。在不同的浏览器中都能正常工作，但总有一个会搞砸一切的人：

这里的问题是字段的大小：使用Bootstrap v3.2 进行设计，这些输入在一个表单中并且有class="form-control" 这应该使它们更宽（如上面的文本输入和下面的选择）。

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

感谢您的帮助！

【问题讨论】：

你能把你的代码贴在这里吗？？？这可能会帮助你stackoverflow.com/questions/15857092/…
@ManjunathSiddappa 使用此解决方案，当您单击该字段时，该字段看起来就像一个具有日期选择器功能的文本输入。它实际上应该像现在一样看起来像一个日期选择器，但更宽一些......

标签： html ios css forms twitter-bootstrap

【解决方案1】：

这修复了我在 IOS 上的所有日期字段。

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

【讨论】：

或-webkit-appearance: none。
2021 年到来，这仍然有用。我发现 display:block 可能不需要，但 min height 和 textfield 元素肯定是。

【解决方案2】：

这就是 iOS 对待input type="date" 的方式。我不会担心原生样式。它可能看起来不太好，但使用 iOS 的人已经习惯了。

您可以在日期输入中使用min-width:95%。它使它适合，至少在 iOS 8 中，并且不会改变外观。虽然我没有在 Android 或更早版本的 iOS 中测试过。或者，要使其居中，您可以将.center-block 添加到输入中，这样至少它是居中的并且看起来不会那么偏。

演示：http://jsbin.com/civor/1/

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

HTML：

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

【讨论】：

如果 min-width 可以解决问题，您也可以尝试使用 100% 的 min-width 并设置边框大小。
@ShaneS.Anderson box-sizing:border-box 是 Bootstrap 中包括 :after 和 :before 在内的所有内容的默认值。所以：不。

【解决方案3】：

在我的情况下，我使用“新”flexbox 布局类型对其进行了修复：

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

演示：http://output.jsbin.com/bugeqowamu/1

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

【讨论】：

【解决方案4】：

这个问题有两种解决方案，如下代码所示。

对于这个 ios 问题，您可以使用以下任何解决方案。

方法1）添加c1类css，会增加控件的宽度。这将改变它的用户界面，看起来像普通的输入框，即它不会显示下拉符号（参考方法 1 输出）

方法2）添加c2类css，它只会增加控件的宽度而不删除下拉符号（参考方法二输出）

方法 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" >






Method 2)                      
<input type="time" class="form-control c2" name="txtOut"
                                                id="txtOut" >

【讨论】：

这是为 type=time 而不是 type=date

【解决方案5】：

这是输入组中引导 3 表单控件的解决方案，其中包含 Razvan Grigore 回答的基础知识。

<div class="form-group">
  <label for="amount">Input Label</label>
  <div class="input-group">
  <div class="fixIosInputLayout">
    <input id="amount" type="time" class="form-control"/>
  </div>
  <span class="input-group-addon"> unit </span>
  </div>
</div>

/* fix for ios safari inputs width */
.fixIosInputLayout
{
  display: flex;
}
.fixIosInputLayout>input.form-control[type="date"], .fixIosInputLayout>input.form-control[type="time"]
{
  display:flex; 
  display:-webkit-flex; 
  flex: 1 0 0; 
  -webkit-flex: 1 0 0; 
  border-radius: 4px; 
}
.input-group>.fixIosInputLayout>input.form-control[type="date"], .input-group>.fixIosInputLayout>input.form-control[type="time"] 
{ 
  border-radius: 4px 0 0 4px; 
}

因此，使输入像其他具有类 form-control 的引导输入一样全宽，并正确显示 input-group-addon（此处在右侧）。

预览：（在 Chrome 上，在 ios 上值居中。

【讨论】：

【解决方案6】：

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

【讨论】：

完全不知道这是如何解决这个问题的