如何在不使用JS / jQuery的情况下使占位符消失？

Question

在搜索字段中，我刚刚发现，单击input字段将一直保留到输入内容为止。我想在单击该字段时隐藏占位符。

由于该站点将交付给另一个团队，所以我不想在此处添加JavaScript或jQuery代码。因为这是客户的要求之一。如何使用CSS和HTML实现它？这是HTML的默认行为。

<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">

Answer 1

您可以使用选择器input:focus::placeholder：

input:focus::placeholder {
  visibility: hidden
}

<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">