当文本对齐居中时，插入符号出现在占位符 onfocus 的末尾

Question

这不是特别重要，我通过添加以下内容很容易地解决了这个问题：

 onfocus="this.placeholder = '';" onblur="this.placeholder = 'Search...';"

但是，出于好奇，这将如何完成？这是 fiddle：https://jsfiddle.net/vjLvssmp/

CSS 有什么方法吗？还是需要 JS？

谢谢，约翰

Answer 1

--编辑

您可以使用 text-indent 和 placeholder 选择器来实现。

.whitesearch {
  ...
  text-indent: 45px;
}

.whitesearch::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-indent: 0px;
}

Caret appear at end of placeholder onfocus when text-align is centered