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

使用::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"/>

Answer 2

这是因为您希望占位符位于中间但文本从左侧开始。希望对你有用

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

如何在居中占位符的开头定位HTML输入光标

2 个答案: