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

user_1604542 0
Viewed 1971

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?

css html
1 Answers

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"/>

user_10684460
Related