html - 如何仅使用 css 更改焦点上输入占位符的文本？

Question

如何仅使用 css 更改焦点上输入占位符的文本？初始状态:

<form action="">
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

我想在输入焦点上得到什么。我只需要使用 css，不需要 js。

<form action="">
  <input type="text" placeholder="Hello">
  <button type="submit">Search</button>
</form>

Answer 1

那真的不是 CSS 的目的。

CSS 用于设置内容样式； HTML 用于实际内容本身。

如果您需要在 HTML 加载后修改内容，这就是 Javascript 的用途。

所以你问题的真正答案是:直接修改 HTML 或使用 Javascript。

使用 Vanilla Javascript，您可以使用其 id 更改输入元素。

function changeOutput(){
  document.getElementById('hi').value = "changed text";
}

<h1>Hello World!</h1>
INPUT: <input type="text" id="hi" placeholder="placeholding text" onfocus="changeOutput()"/>

Live Example