CODEWITHSUNDEEP
htmlcss
Jk33
Jk33

Reputation: 905

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

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?

Upvotes: 4

Views: 3320

Answers (1)

dwjohnston
dwjohnston

Reputation: 11771

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

Upvotes: 12

Related Questions