How to position HTML input cursor at beginning of centered placeholder

Question

如何将光标定位在占位符的开头（而不是输入字段的开头）而不是中间，同时仍保持我的占位符文本居中？

 <input type="text" name="input_query" id="input_query" autofocus style="text-align: center; width: 100%" placeholder="Describe what's happening in your photo" autocomplete="off"/> 

Answer 1

Use ::placeholder to apply CSS to the placeholder only:

 input { width: 100% } input::placeholder { text-align: center; } 

 <input type="text" autofocus placeholder="Describe what's happening in your photo" autocomplete="off"/> 

If you want the cursor to appear at the beginning of the placeholder, you can do something similar, though it's pretty weird and isn't centered once the user starts typing:

 input { width: 65%; padding-left: 35%; } 

 <input type="text" autofocus placeholder="Describe what's happening in your photo" autocomplete="off"/> 

Answer 2

this is if you want placeholder to be in the middle but text to start from left. hope that works for you

 #input_query{ text-align: left; } ::-webkit-input-placeholder { text-align: center; } :-moz-placeholder { /* Firefox 18- */ text-align: center; } ::-moz-placeholder { /* Firefox 19+ */ text-align: center; } :-ms-input-placeholder { text-align: center; } 

 <input type="text" name="input_query" id="input_query" autofocus style=" width: 100%" placeholder="Describe what's happening in your photo" autocomplete="off"/>