日期输入无法在iOS7上正确对齐

Question

tl; dr，在这里测试，iOS7无法正确对齐日期输入： http://cdpn.io/dxjHy

考虑这个HTML：

<input type="date" id="test">

这个CSS：

#test {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  text-align:right;
  padding:30px;
  width:400px;
  font-size:20px;
}

iOS7上的Safari不希望右对齐日期输入中的文本。我的观点是Chrome的解释是正确的。关于如何让Safari合作的任何想法？

Chrome 30：

iOS7，iPad上的Safari Mobile：

Answer 1

我找到了一个效果很好的解决方案。这似乎是Safari的input[type=date]

样式表中的罪魁祸首

display: -webkit-inline-flex;

将此添加到您的CSS ...

input[type=date] {
    display:block;
    -webkit-appearance:button;
    -moz-appearance:button;
    appearance:button;
}

...现在您的输入将能够正确理解text-align:right;。

Answer 2

我们的办公室遇到了同样的问题，我们做了一个解决方法。

<div> 
    <input type="date" id="test">
</div>

和css

div{
    position:relative;
    width:100%
}
input[type="date"]{
    position:absolute;
    width:auto;
    right:0;
}

希望，它可以帮助你。

Answer 3

使用Hoshibe css技巧确实有帮助，但必须添加＆＃34;左：0;＆＃34;使输入框居中并且没有溢出。

div{
    position:relative;
    width: 99%; <!--Can be any width you need.-->
}
input[type="date"]{
    position:absolute;
    width:auto;
    right:0;
    left: 0;
}

然后将以下代码添加到输入[type =＆＃34; date＆＃34;]将右对齐文本。

text-align: right;
display: block;

这解决了iOS 7和8中的问题。