input type="date" text-align:正确的IOS设备答案

【问题标题】：input type="date" text-align:right IOS devicesinput type="date" text-align:正确的IOS设备
【发布时间】：2022-04-09 06:34:18
【问题描述】：

/* css */
input{ text-align:right;}

// html
<input type="date" value="2015-05-06">

当输入type="date", text-align:right 在Safari 形式的IOS 设备上不可用，但其他设备的浏览器显示正常。如何解决？

【问题讨论】：

【解决方案1】：

iOS Safari 将样式应用于输入中的元素。以下是我使用 Safari + Simulator 进行检查时看到的内容：

<input name="example" type="date">
  <div pseudo="-webkit-date-and-time-value">Jan 16, 2025</div>
</input>

并且内部元素默认应用以下样式：

input::-webkit-date-and-time-value {
  margin-top: 0px;
  text-align: center;
  width: 100%;
}

因此，您可以使用针对特定元素的选择器来覆盖对齐方式：

input::-webkit-date-and-time-value {
  text-align: right;
}

【讨论】：

【解决方案2】：

您需要添加display: block 来解决此问题。

input[type="date"] {
  display: block;
  text-align: right;
}

【讨论】：

【解决方案3】：

试试这个。

input[type="date"] {
text-align:right;

}

【讨论】：

【解决方案4】：

您是否尝试过像这样添加text-align: -webkit-right;：

/* CSS */
input {
  text-align: right;
  text-align: -webkit-right;
}

// html
<input type="date" value="2015-05-06">

【讨论】：

【解决方案5】：

并非所有浏览器都支持日期输入字段：http://caniuse.com/#feat=input-datetime

【讨论】：

【解决方案6】：

试试这个，因为当你提到它的类型时，它会在下面的属性中仅用于日期文本框

input[type="date"] {
text-align:right;
}

【讨论】：