日期输入无法在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:

IOS 7

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;正确理解.