使闪烁光标的位置居中而不更改占位符的位置

Question

我正在website上工作，我想将闪烁的光标的位置居中居中。

此刻，在占位符what are you looking for...上，闪烁的光标从左开始，如下所示。

我用于占位符和闪烁的光标的CSS代码是：

闪烁光标：

.input-searchicon input{
padding-left: 40px;
}

占位符：

::-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; 


}

问题陈述：

我想知道应该在上面的CSS代码中进行哪些更改，以使闪烁的光标从居中的占位符开始居中。

Answer 1

输入文本也应居中。将输入样式更改为此：

.input-searchicon input{
   padding-left: 40px;
   text-align: center;
 }

Answer 2

只需在text-align: center上使用input。

.input-searchicon{
  text-align: center;
}


::-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" placeholder="what are you looking for" class="input-searchicon"/>