javascript - How to position HTML input cursor at beginning of centered placeholder - Stack Overflow

admin管理员组

文章数量:1405164

How can I position the cursor to be at the beginning of the placeholder (not the beginning of the input field) instead of the middle, while still keeping my placeholder text centered?

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

How can I position the cursor to be at the beginning of the placeholder (not the beginning of the input field) instead of the middle, while still keeping my placeholder text centered?

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

• javascript
• html
• input

Share Improve this question Follow edited Apr 30, 2018 at 4:56 Smokey Dawson 9,2402222 gold badges8585 silver badges162162 bronze badges asked Apr 30, 2018 at 3:50 user6004404user6004404

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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" autoplete="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" autoplete="off"/>

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" autoplete="off"/>

本文标签： javascriptHow to position HTML input cursor at beginning of centered placeholderStack Overflow