html - 仅使用 CSS 输入占位符

Question

我知道这里有很多关于此查询的问题，但没有一个能为我提供解决方案。

HTML

<input id="tb1" type="text" class="note" />

<br>

<p class="note1"> This is not done.</p>

CSS

p.note1:before{
    content: "Note:";
}

tb1.note:before{
    content: "Enter your number";
}

我正在尝试使用上面的代码和在网络上找到的变体，但似乎都不适用于输入标签。它适用于 p 标签。

编辑:我无法将 value 属性添加到输入标签并管理 css 以获得所需的结果。这是系统的限制。

EDIT2:忘记我的 css，有没有什么方法可以在不使用 placeholder 属性的情况下使用占位符文本，而只使用 input type="text"

Answer 1

:before creates a pseudo-element that is the first child of the element matched.

所选元素必须是容器标签。空标签，如 <input>没有任何子元素。

如果您无法手动编辑 HTML 代码，您仍然可以使用 JavaScript 来完成:

document.getElementById("tb1").setAttribute("placeholder", "Enter your number");

更新

如果你只想通过使用 CSS 来实现这一点，你需要有一个容器元素来包装你的 <input> (或紧随其后)。

但是 它不能正常工作 placeholder做。您将无法检查 <input> 的值通过 CSS。如果你在 <input> 里面写东西, 在 blur 之后事件，生成的占位符将显示在 <input> 上再次。

HTML:

<label>
    <input id="tb1" type="text" class="note">
</label>

CSS:

label {
  position: relative;
}

label:after {
  content: 'Enter your number';
  position: absolute;
  left: 5px;
  top: 0;
  color: #bbb;
}

#tb1 {
  position: relative;
}

#tb1:focus {
  z-index: 10;
}

JSBin Demo