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

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元素没有内容.

例如,如果你写的<input type="text">Test</input>(这是错误的),浏览器会纠正这一点,并把文字后输入元素.

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

请参阅规范中的示例:

例如,以下文档片段和样式表:

<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内容属性插入的对象是匿名替换元素.

请注意,这甚至在规范中提到:

本规范不完全定义的相互作用:before 和:after与替换元素(如IMG在HTML).

而更明确:

替换元素没有::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的代码.