twitter-bootstrap iOS safari 弄乱了输入类型=日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26573346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS safari messes up input type=date
提问by Florian Müller
I'm using HTML 5's <input type="date" />. Works fine in different browsers, BUT there is always the one who messes everything up:
我正在使用 HTML 5 的<input type="date" />. 在不同的浏览器中都可以正常工作，但总有人把一切搞砸了：
The problem hereby is the size of the field: Using Bootstrap v3.2for the design, these inputs are in a form and have class="form-control"which should make them wider (as the text input above and the select below).
这里的问题是字段的大小：使用Bootstrap v3.2进行设计，这些输入采用一种形式，class="form-control"并且应该使它们更宽（如上面的文本输入和下面的选择）。
Is there a way to say iOS that the datepicker should be 100% wide? style="width:100%"does nothing. width:1000pxworks indeed, width:100% !importantdoes nothing.
有没有办法说 iOS 日期选择器应该是 100% 宽？style="width:100%"什么也没做。width:1000px确实有效，width:100% !important什么都不做。
Thanks for the help!
谢谢您的帮助！
采纳答案by Christina
This is the way iOS treats input type="date". I wouldn't worry about native styling. It may look off, but people using iOS are used to it.
这就是 iOS 对待input type="date". 我不会担心原生样式。它可能看起来不太好，但使用 iOS 的人已经习惯了。
You can use min-width:95%on the date input. It makes it fit, at least in iOS 8, and doesn't change the appearance otherwise. Though I haven't tested in Android or earlier version of iOS. Alternatively, to just center it, you can add .center-blockto the input, so at least it's center and doesn't look so off.
您可以min-width:95%在日期输入上使用。它使它适合，至少在 iOS 8 中，否则不会改变外观。虽然我还没有在 Android 或更早版本的 iOS 中测试过。或者，只是将其居中，您可以添加.center-block到输入中，因此至少它是居中的并且看起来不那么离谱。
DEMO: http://jsbin.com/civor/1/
.input-min-width-95p {min-width:95%;}
HTML:
HTML：
<input type="date" class="form-control input-min-width-95p" ...
回答by Carter Medlin
This fixes all my date fields on IOS.
这修复了我在 IOS 上的所有日期字段。
input[type="date"]
{
display:block;
-webkit-appearance: textfield;
-moz-appearance: textfield;
min-height: 1.2em;
}
回答by Razvan Grigore
In my case I fixed it with the "new" flexboxlayout type:
在我的情况下，我用“新”的flexbox布局类型修复了它：
input {
display:flex;
display:-webkit-flex;
flex: 1 0 0;
-webkit-flex: 1 0 0;
}
DEMO: http://output.jsbin.com/bugeqowamu/1
演示：http: //output.jsbin.com/bugeqowamu/1
NOTE: the container must also have display: flex;as in the demo.
注意：容器也必须具有display: flex;演示中的内容。
回答by GSB
There are two solutions for this problem as shown in below code. You can use any from them.
这个问题有两种解决方案，如下面的代码所示。您可以使用它们中的任何一个。
On ios Method 1 will increase width of control along with this it will change its UI and look like normal inputbox ie it won't show dropdown symbol as shown in Method 1 OUTPUT and Method 2 will just increase width of control without removing dropdown symbol as shown in Method 2 OUTPUT
在 ios 上，方法 1 将增加控件的宽度，同时它会改变其 UI 并看起来像正常的输入框，即它不会显示下拉符号，如方法 1 OUTPUT 所示，方法 2 只会增加控件的宽度而不删除下拉符号作为显示在方法 2 OUTPUT
Method 1 OUTPUT
方法一输出
Method 2 OUTPUT
方法二输出
.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" >