如何在不使用 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">

How to make disappear the place holder without using JS/jQuery?