在“ 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>好像是特殊）。