代码之家 › 专栏 › 技术社区 › flash

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

placeholder cursor css html

flash · 技术社区 · 6 年前

我在做一个 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代码中做些什么更改,以便 闪烁的光标从中心开始,占位符也居中。

2 回复 | 直到 6 年前

Saman 6 年前

输入的文本也应该居中。将输入样式更改为:

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

Unmitigated 6 年前

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前