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

Question

这不是特别重要，我很容易就解决了这个问题，添加:

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

然而，只是出于好奇，这是如何做到的?这里是小提琴:https://jsfiddle.net/vjLvssmp/

在CSS中有一种方法，还是需要JS?

谢谢,约翰。

Answer 1

—EDIT

可以使用text-indent和占位符选择符来实现。

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

这里有一个例子。https://jsfiddle.net/nonyok0q/3/