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

: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 2

这对于这个简单的事实不起作用：

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

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

Answer 3

修改

首先尝试这个:( 注意：你需要一些j来检测输入中是否输入了文字）

除此之外 - 我认为在输入元素上没有使用占位符属性的占位符文本有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 4

我找到了这种方法但并非所有浏览器都支持：

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

注意：您忘记放置ID选择器# tb1.note

see this link

Answer 5

另一种可以实现的方法，并没有真正看到任何其他人提供它作为选项，而是使用锚作为输入和标签周围的容器，并通过一些颜色技巧处理标签的删除， #hashtag和css a：访问过。（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');

仅使用CSS输入占位符

6 个答案:

更新

标记

CSS