How to make a text input align to center, but have the cursor aligned left when focused?

Question

I have an input text like the following:

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

The placeholder is correctly shown centered, but when I focus on the field, the cursor is also at the center of the text field, and I want it to be at the left of the placeholder. How can I align the cursor only?

Answer 1

You can use the :focus selector.

You probably also want to use ::placeholder selector so that the placeholder doesn't move.

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

input:focus {
    text-align: left; 
}

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