10

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

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

4

6 回答 6

14

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

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

如果您无法手动编辑 HTML 代码，您仍然可以使用 JavaScript 进行编辑：

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

更新

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

但它不能正常工作placeholder。您将无法检查<input>CSS 的值。如果你在<input>, afterblur事件中写了一些东西，生成的占位符将<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 演示

于 2013-08-20T07:41:34.157 回答
2

它不适用于以下简单事实：

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

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

于 2013-08-20T07:39:24.730 回答
2

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

于 2016-09-20T11:50:03.600 回答
1

I have found this method but not supported by all browsers:

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

Note: you have forgot to place an id selector # tb1.note

see this link

于 2013-08-20T08:09:40.057 回答
1

这可以实现的另一种方法，并且没有真正看到任何其他人将其作为选项，而是使用锚作为输入和标签周围的容器，并通过一些颜色技巧处理标签的删除，#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/

于 2014-05-18T08:16:32.170 回答
1

编辑：

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

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

小提琴

标记

<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标签上使用伪元素 - 或任何其他非容器元素

从伪元素标签信息：

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

替换元素

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

于 2013-08-20T07:41:05.787 回答