html - 如何使文本输入对齐到中心，但光标在聚焦时左对齐？

Question

我有如下输入文本:

<input type="text" placeholder="mm/dd/yyyy" style="text-align:center"/>

占位符正确显示为居中，但是当我关注该字段时，光标也位于文本字段的中心，我希望它位于占位符的左侧。如何只对齐光标？

Answer 1

您可以使用 :focus选择器。

您可能还想使用 ::placeholder选择器，以便占位符不会移动。

input, input::placeholder {
    text-align: center; 
}

input:focus {
    text-align: left; 
}

<input type="text" placeholder="mm/dd/yyyy"/>