Как разместить курсор ввода HTML в начале центрированного заполнителя

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

это если вы хотите, чтобы заполнитель был посередине, а текст начинался слева. надеюсь, что это работает для вас

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

Answer 2

Используйте ::placeholder, чтобы применить CSS только к заполнителю:

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

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

Если вы хотите, чтобы курсор появился в начале заполнителя, вы можете сделать что-то похожее, хотя это довольно странно и не центрируется, когда пользователь начинает печатать:

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

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