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

Question

tl;博士，这里的测试，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 合作的任何想法？

铬 30：

iOS7、iPad 上的 Safari 移动版：

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 技巧确实有帮助，但必须添加 "left: 0;" 使输入框居中并且没有溢出。

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

然后将以下代码添加到 input[type="date"] 将右对齐文本。

text-align: right;
display: block;

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