如何实现textarea占位符居中，点击后从左侧开始输入？

当然可以实现这个需求！只需要借助CSS的伪元素就能轻松搞定，下面是具体的实现方案：

我们可以通过::placeholder伪元素单独控制占位符的对齐方式，同时保持textarea的默认文本对齐为左对齐，这样用户输入内容时就会自动从左侧开始。

完整代码示例 #

<textarea placeholder="请输入内容..." rows="4" cols="50"></textarea>

textarea {
  /* 确保输入内容左对齐 */
  text-align: left;
  /* 可选：添加内边距让排版更美观 */
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 控制占位符的对齐方式 */
textarea::placeholder {
  text-align: center;
  /* 可选：调整占位符颜色，增强区分度 */
  color: #999;
}

原理说明 #

• textarea本身的text-align: left保证了用户输入的内容始终左对齐；
• ::placeholder伪元素专门用于设置占位符的样式，给它设置text-align: center就能让占位符居中显示；
• 这种方式完全不会影响输入内容的排版逻辑，完美匹配你的需求。

兼容性提示 #

现代浏览器（Chrome、Firefox、Edge等）都原生支持::placeholder伪元素。如果需要兼容老旧浏览器（比如IE10及以下），可以补充添加带浏览器前缀的版本：

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  text-align: center;
}
textarea::-moz-placeholder { /* Firefox 19+ */
  text-align: center;
}
textarea:-ms-input-placeholder { /* IE 10+ */
  text-align: center;
}

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