Question

在Firefox 3和Google Chrome 8.0中，以下工作正常：

<style type="text/css">
    span:before { content: 'span: '; }
</style>

<span>Test</span> <!-- produces: "span: Test" -->

但是当元素为<input>时，它不会出现：

<style type="text/css">
    input:before { content: 'input: '; }
</style>

<input type="text"></input> <!-- produces only the textbox; the generated content
                                 is nowhere to be seen in both FF3 and Chrome 8 -->

为什么它不像我预期的那样工作？

Answer 1

使用:before和:after，您可以指定在该元素内部内容之前（或之后）插入哪些内容。 input元素没有内容。

E.g。如果您写<input type="text">Test</input>（这是错误的），浏览器将更正此项并将文本放在输入元素之后。

你唯一能做的就是将每个输入元素包装在一个span或div中，并在这些上应用CSS。

请参阅specification中的示例：

例如，以下文档片段和样式表：
<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }
...将以与以下文档片段和样式表完全相同的方式呈现：
<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

这与<br>，<img>等不起作用的原因相同。（<textarea>似乎很特殊。）

Answer 2

这不是因为input标记本身没有任何内容，而是因为它们的内容超出了CSS的范围。

input元素是一种名为 replaced elements 的特殊类型，它们不支持:pseudo和:before等:after选择器。

在CSS中，替换元素是一个元素，其表示形式为超出CSS的范围。这些是外部物体表示独立于CSS。典型的替换元素是<img>，<object>，<video>或表单元素<textarea> 和<input>。某些元素（如<audio>或<canvas>）已被替换仅在特定情况下的元素。使用CSS插入的对象内容属性是匿名替换元素。

请注意，这甚至可以引用in the spec：

此规范未完全定义:before的互动和:after替换元素（例如HTML中的IMG）。

more explicitly：

已替换的元素没有::before和::after 伪元素

Answer 3

这样的工作：

input + label:after {
  content: 'click my input';
  color: blue;
}

input:focus + label:after {
  content: 'not valid yet';
  color: blue;
}

input:valid + label:after {
  content: 'looks good';
  color: red;
}

<input id="input" type="number" required />
<label for="input"></label>

然后添加一些花车或定位来订购东西。

代码JSBin。

Answer 4

fyi <form>也支持:before / :after，如果你将<input>元素包裹起来可能会有所帮助......（我自己也遇到了设计问题那也是）

Answer 5

使用标签标签，我们的方法 for = ，绑定到输入。如果遵循表单规则，并避免与标记混淆，请使用以下内容：

<style type="text/css">
    label.lab:before { content: 'input: '; }
</style>

或比较（短代码）：

<style type="text/css">
    div label { content: 'input: '; color: red; }
</style>

...形式

<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>

或比较（短代码）：

<div><label></label><input name="n" ...></div>

在'input'元素之前或之后生成CSS内容

5 个答案: