在不改变占位符位置的情况下使闪烁光标的位置居中

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

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

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

在不改变占位符位置的情况下使闪烁光标的位置居中

centering the position of blinking cursor without changing the position of placeholder

html

css

cursor

placeholder