仅使用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标签.

编辑:我无法为输入标签添加值属性并管理所需结果的css.这是系统的局限性.

编辑2:忘记我的CSS,有没有什么方法可以使用占位符文本而不使用占位符属性和只是普通的CSSinput type="text"

Answer 1

:before之前创建一个伪元素,它是匹配元素的第一个子元素.

所选元素必须是容器标记.像空标签一样<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演示

Answer 2

它不起作用的简单事实是：

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

无效。<input />元素不是容器。正如规范所指出的，结束标签是被禁止的（并且基本上被浏览器忽略）：http ://www.w3.org/TR/html401/interact/forms.html#h-17.4