仅使用 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，有没有什么方法可以在不使用占位符属性的情况下使用占位符文本，而只需使用input type="text"的纯css@

Answer 1

这个简单的事实是行不通的：

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

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

Answer 2

编辑：

初学者试试这个：（注意：你需要一些js来检测输入中是否输入了文本）

除此之外 - 我认为没有使用占位符属性的输入元素上的占位符文本的 css 解决方案。

FIDDLE

标记

<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>

css

.container
{
    position: relative;
}
input
{
    background: transparent;
}
input:focus + .fakePlaceholder
{
    display: none;
}
.fakePlaceholder
{
    color:gray;
    position:absolute;
    top: 3px;
    left: 5px;
    z-index: -1;
}

---

您不能在 input 标签上使用伪元素 - 或任何其他非容器元素

来自Pseudo-Elements tag info：

您不能将它们（伪元素）与替换元素一起使用（请参阅 下面）没有实际内容。这是因为生成的 内容位于元素内。
...

替换元素

外观和/或尺寸由某些因素决定的任何元素 外部资源被认为是被替换的元素。一些 伪元素不能应用于替换元素，因为它们 没有“内容”或被某些东西（例如用户 界面控制）。替换的元素包括图像 (<img>)、内联 框架（<iframe>），换行符（<br>），水平线（<hr>）， 插件 (<object>)、表单元素 (<button>、<textarea>、<input> 和 <select>)、视频 (<video>)、音频 (<audio>) 和画布 (<canvas>)。任何其他元素都被认为是不可替换的 元素。

Answer 3

:before 创建一个伪元素，它是匹配元素的第一个子元素。

所选元素必须是容器标签。像<input> 这样的空标签没有任何子元素。

如果您不能手动编辑 HTML 代码，您仍然可以使用 JavaScript：

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

更新

如果您只想通过使用 CSS 来实现这一点，您需要有一个容器元素来包装您的 <input>（或在它之后）。

但是它不能像placeholder 那样正常工作。您将无法通过 CSS 检查 <input> 的值。如果你在<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

Answer 4

我找到了这种方法，但不是所有浏览器都支持：

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

注意：你忘了放置一个id选择器#tb1.note

see this link

Answer 5

另一种可以实现的方法，并且还没有真正看到任何其他人将其作为选项，而是使用锚点作为输入和标签周围的容器，并通过一些颜色技巧处理标签的移除， #hashtag 和 css a:visited。 （底部的jsfiddle）

您的 HTML 将如下所示：

<a id="Trickory" href="#OnlyHappensOnce">
    <input type="text" value="" id="email1" class="inputfield_ui" />
    <label>Email address 1</label>
</a>

还有你的 CSS，像这样：

html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */

a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */

a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */

a#Trickory input {
    width:95%;
    z-index:3;
    position:relative;
    background-color:transparent;
}
a#Trickory label {
    position:absolute;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}

你可以在 jsfiddle 看到这个工作，注意这个解决方案只允许用户选择一次字段，然后它会永久删除标签。也许不是您想要的解决方案，但绝对是我没有看到其他人提到的可用解决方案。如果您想进行多次试验，只需将您的#hashtag 更改为新的“未访问”标签即可。

http://jsfiddle.net/childerskc/M6R7K/

Answer 6

如果您无法操作 html 并使用placeholder=""。使用 javascript 来操作占位符。无论如何，每种 css 方法都是 hack-isch。 例如。使用 jQuery： $('#myFieldId').attr('placeholder', 'Search for Stuff');