如何在表单字段中居中光标及输入文本？参考WIRED首页搜索框

嘿，我刚好研究过类似的效果，这其实用几行CSS就能轻松搞定，完全能达到你想要的那种对齐效果！

核心实现思路 #

要让输入框里的光标和文本都居中，关键是利用CSS的文本对齐属性，同时确保输入框的内边距和行高设置合理，避免光标偏移。

完整代码示例 #

HTML结构

<!-- 简单的搜索输入框示例 -->
<input type="search" class="centered-input" placeholder="搜索内容...">

CSS样式

.centered-input {
  /* 核心：让文本和光标水平居中 */
  text-align: center;
  /* 调整输入框外观，贴近目标效果 */
  width: 320px;
  padding: 12px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 24px; /* 圆角效果 */
  font-size: 16px;
  line-height: 1.4;
  /* 移除浏览器默认的搜索框样式差异 */
  -webkit-appearance: none;
  appearance: none;
}

/* 让提示文本也保持居中 */
.centered-input::placeholder {
  text-align: center;
  color: #999;
}

/* 聚焦时的样式优化 */
.centered-input:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

关键细节说明 #

• text-align: center：这是实现文本和光标居中的核心属性，它会让输入框内的所有文本（包括光标）水平居中对齐。
• 处理placeholder：单独给::placeholder设置text-align: center，确保提示文本也和输入内容保持一致的居中效果。
• 移除默认样式：-webkit-appearance: none和appearance: none可以消除不同浏览器对搜索框的默认样式差异，让效果更统一。
• 行高与内边距：合理设置line-height和padding，能让光标在垂直方向也保持居中，避免出现光标偏上或偏下的情况。

这样设置后，你的输入框就会和目标网站的搜索框效果一致，光标和输入的文本都会完美居中啦！

内容的提问来源于stack exchange，提问作者Peter Wolfram